html 回复笑脸图标,使用CSS3构建带光照效果的笑脸图标-CSDN博客

这篇博客详细介绍了如何使用CSS和SVG创建一个复杂的笑脸图形。内容涵盖了百分比高度宽度设置、绝对定位、渐变背景、径向渐变、内阴影、外阴影以及不同浏览器的兼容性处理。通过实例代码，解释了每个样式属性的作用，帮助读者理解CSS在图形设计中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

语言：

CSSSCSS

确定

html {

height: 100%;

width: 100%;

}

body {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

text-align: center;

height: 100px;

margin: auto;

background: #EBEEF3;

}

.smiley {

height: 100px;

width: 100px;

margin: 0 auto;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

background-color: #ffe356;

*zoom: 1;

filter: progid: DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFFFE356', endColorstr='#FFF59C65');

background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZTM1NiIvPjxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjZmZjOTU2Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZjQ4MjM2Ii8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');

background-size: 100%;

background-image: -moz-radial-gradient(center, #ffe356 0%, #ffc956 60%, #f48236 100%);

background-image: -webkit-radial-gradient(center, #ffe356 0%, #ffc956 60%, #f48236 100%);

background-image: radial-gradient(center, #ffe356 0%, #ffc956 60%, #f48236 100%);

position: relative;

}

.smiley:after {

content: "";

position: absolute;

left: 9%;

top: 5%;

height: 90%;

width: 82%;

*zoom: 1;

filter: progid: DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFFFE356', endColorstr='#FFF59C65');

background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjciLz48c3RvcCBvZmZzZXQ9IjQ1JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');

background-size: 100%;

background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.7)), color-stop(45%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));

background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 100%);

background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 100%);

background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 100%);

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

}

.smiley * {

position: absolute;

z-index: 10;

}

.smiley:after,

.smiley:before {

content: "";

position: absolute;

}

.happy .eye {

top: 32%;

height: 14%;

width: 8%;

background-color: #ab6a14;

*zoom: 1;

filter: progid: DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFAB6A14', endColorstr='#FF6A3F06');

background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FiNmExNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzZhM2YwNiIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');

background-size: 100%;

background-image: -moz-radial-gradient(center, ellipse cover, #ab6a14 0%, #6a3f06 100%);

background-image: -webkit-radial-gradient(center, ellipse cover, #ab6a14 0%, #6a3f06 100%);

background-image: radial-gradient(ellipse cover at center, #ab6a14 0%, #6a3f06 100%);

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

border: 1px solid #522C01;

-moz-box-shadow: 0 2px 2px 0px rgba(253, 253, 100, 0.8);

-webkit-box-shadow: 0 2px 2px 0px rgba(253, 253, 100, 0.8);

box-shadow: 0 2px 2px 0px rgba(253, 253, 100, 0.8);

}

.happy .eye.left {

left: 32%;

}

.happy .eye.right {

right: 32%;

}

.happy .blush {

position: absolute;

left: 50%;

top: 50%;

width: 2%;

height: 2%;

-moz-box-shadow: 1.6rem 0.5rem 1.6rem 0.3rem red, -1.6rem 0.5rem 1.6rem 0.3rem red;

-webkit-box-shadow: 1.6rem 0.5rem 1.6rem 0.3rem red, -1.6rem 0.5rem 1.6rem 0.3rem red;

box-shadow: 1.6rem 0.5rem 1.6rem 0.3rem red, -1.6rem 0.5rem 1.6rem 0.3rem red;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

}

.happy .mouth {

top: 52%;

left: calc(50% - (40% / 2));

height: 18%;

width: 40%;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

border-bottom: 5px solid #724200;

}

html 回复 笑脸图标,使用CSS3构建带光照效果的笑脸图标

html 回复笑脸图标,使用CSS3构建带光照效果的笑脸图标