CSS3设置字体阴影效果使用 text-shadow 属性,下面我们来介绍下加深字体阴影的方法,希望对各位有帮助!
css字体阴影如何加深?
css设置字体阴影使用text-shadow属性。
语法:text-shadow: h-shadow v-shadow blur color;
参数:h-shadow 水平阴影的位置
v-shadow 垂直阴影的位置
blur 模糊的距离
color 阴影的颜色
text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
(推荐学习:CSS视频教程)
加深字体阴影的方法:
1、通过合适的模糊半径来加深阴影// html
模糊半径为1px字体阴影
模糊半径为2px字体阴影
模糊半径为3px字体阴影
模糊半径为4px字体阴影
模糊半径为5px字体阴影
模糊半径为6px字体阴影
模糊半径为7px字体阴影
// css
.a{
text-shadow: 0 0 1px #000;
}
.b{
text-shadow: 0 0 2px #000;
}
.c{
text-shadow: 0 0 3px #000;
}
.d{
text-shadow: 0 0 4px #000;
}
.e{
text-shadow: 0 0 5px #000;
}
.f{
text-shadow: 0 0 6px #000;
}
.g{
text-shadow: 0 0 7px #000;
}
效果:
可以看见当模糊半径为3-4px时,阴影最深。
2、使用绝对定位,让多个具有阴影的字体叠加// html
两个具有阴影的字体叠加效果
两个具有阴影的字体叠加效果
// css
.wrap{
position: relative;
}
.wrap > p{
position: absolute;
text-shadow: 0 0 6px #000;
}
可以看见,通过这种方式,能够获得更深的阴影。
更多CSS3相关技术文章,请访问CSS3答疑栏目进行学习!