CSS3的text-shadow和box-shadow

来源：互联网发布：模糊聚类算法 matlab 编辑：程序博客网时间：2024/06/12 01:24

阴影在很多地方都会见到，加上阴影给人以立体的感觉，今天就简单的总结一下css3的属性text-shadow和box-shadow是如何实现阴影效果的。

一. text-shadow属性

该属性是来给文字添加阴影效果的，接下来看一下他的用法，和所实现的效果：
用法：text-shadow:h-shadow v-shadow blur color;

h-shadow：水平方向的偏移量，值为正数表示像左偏移，为负数表示向右偏移，单位为距离单位；
v-shadow：垂直方向的偏移量，值为正数表示像向下偏移，为负数表示向上偏移，单位为距离单位；
blur：阴影的模糊距离，单位为距离单位；
color：表示阴影的颜色。

小样例代码：

<!DOCTYPE html><html><head><style> .box{    width:200px;    height:200px;    font-size: 3em;    text-align: center;}.text-shadow-1{    text-shadow: 0px 0px 10px #000;}.text-shadow-2{    text-shadow: 3px 3px 10px #000;}.text-shadow-3{    text-shadow: -3px -3px 10px #000;}</style></head><body><div class="container">    <div class="box">         <div class="text-shadow-1">            nihao        </div>    </div>    <div class="box">         <div class="text-shadow-2">            nihao        </div>    </div>    <div class="box">         <div class="text-shadow-3">            nihao        </div>    </div></div><script type="text/javascript"></script></body></html>

效果如图：
text-shadow-1：没有设置水平和垂直偏移量，阴影在四周环绕
这里写图片描述

text-shadow-2：设置水平和垂直偏移量均为正数，阴影向左下方偏移
这里写图片描述

text-shadow-3：设置水平和垂直偏移量均为负数，阴影向右上方偏移
这里写图片描述

二. box-shadow属性

该属性是给盒子的边框设置阴影，给盒子以立体的感觉，在很多网站都特别常见，下面内容是它的用法和实现效果：
用法：box-shadow:[inset] h-shadow v-shadow blur color
解释：这个的值出了多个inset外，基本和上面的text-shadow值一致，inset指阴影向盒子内部，默认是外部。

小样例代码：

<!DOCTYPE html><html><head><style>.container{    display: flex;    flex-direction: row;    justify-content: space-around;    margin-top:200px;} .box{    width:200px;    height:200px;    font-size: 3em;    text-align: center;}.box-shadow-1{    box-shadow: 0px 0px 20px #f00;}.box-shadow-2{    box-shadow: 3px 3px 20px #f00;}.box-shadow-3{    box-shadow: -3px -3px 20px #f00;}.box-shadow-4{    box-shadow: -5px 0 10px red, 5px 0 10px blue, 0 5px 10px yellow, 0 -5px 10px green;}.box-shadow-5{    box-shadow: inset 0 0 20px green;}</style></head><body><div class="container">    <div class="box box-shadow-1">     </div>    <div class="box box-shadow-2">     </div>    <div class="box box-shadow-3">     </div>    <div class="box box-shadow-4">     </div>    <div class="box box-shadow-5">     </div></div><script type="text/javascript"></script></body></html>

效果如图：
这里写图片描述

以上的5个框，分别对应上述的5个CSS样式，具体就不详细解释了，最后一个设置了inset属性，所以阴影向内；倒数第二个，用了个小技巧，分别给四周设置不一样的阴影，记得写在同一个box-shadow后面，用逗号隔开，不要分开写，会出错哦。

更多关于box-shadow的内容请参考这位博主：http://blog.csdn.net/freshlover/article/details/7610269

0 0