CSS3的text-shadow和box-shadow
阴影在很多地方都会见到，加上阴影给人以立体的感觉，今天就简单的总结一下css3的属性text-shadow和box-shadow是如何实现阴影效果的。
一. text-shadow属性
该属性是来给文字添加阴影效果的，接下来看一下他的用法，和所实现的效果：
用法：text-shadow:h-shadow v-shadow blur color;
- h-shadow：水平方向的偏移量，值为正数表示像左偏移，为负数表示向右偏移，单位为距离单位；
- v-shadow：垂直方向的偏移量，值为正数表示像向下偏移，为负数表示向上偏移，单位为距离单位；
- blur：阴影的模糊距离，单位为距离单位；
- color：表示阴影的颜色。
小样例代码：
<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">nihaodiv>div><div class="box"> <div class="text-shadow-2">nihaodiv>div><div class="box"> <div class="text-shadow-3">nihaodiv>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指阴影向盒子内部，默认是外部。
小样例代码：
<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
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！