CSS3 设置字体阴影效果使用 text-shadow 属性, 下面我们来介绍下加深字体阴影的方法, 希望对各位有帮助!
CSS 设置字体阴影使用 text-shadow 属性.
语法:
text-shadow: h-shadow v-shadow blur color;
参数:
h-shadow 水平阴影的位置
v-shadow 垂直阴影的位置
blur 模糊的距离
color 阴影的颜色
text-shadow 属性向文本添加一个或多个阴影. 该属性是逗号分隔的阴影列表, 每个阴影有两个或三个长度值和一个可选的颜色值进行规定. 省略的长度是 0.
(推荐学习: CSS 视频教程 https://www.html.cn/css/ )
加深字体阴影的方法:
1, 通过合适的模糊半径来加深阴影
- // HTML
- <p class="a"> 模糊半径为 1px 字体阴影 </p>
- <p class="b"> 模糊半径为 2px 字体阴影 </p>
- <p class="c"> 模糊半径为 3px 字体阴影 </p>
- <p class="d"> 模糊半径为 4px 字体阴影 </p>
- <p class="e"> 模糊半径为 5px 字体阴影 </p>
- <p class="f"> 模糊半径为 6px 字体阴影 </p>
- <p class="g"> 模糊半径为 7px 字体阴影 </p>
- // 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
- <div class="wrap">
- <p > 两个具有阴影的字体叠加效果 </p>
- <p > 两个具有阴影的字体叠加效果 </p>
- </div>
- // CSS
- .wrap{
- position: relative;
- }
- .wrap> p{
- position: absolute;
- text-shadow: 0 0 6px #000;
- }
可以看见, 通过这种方式, 能够获得更深的阴影.
来源: http://www.css88.com/qa/css3/15970.html