CSS3 边框阴影box-shadow

box-shadow是css3中的一个属性，它可以向框添加一个或多个阴影。

语法：

box-shadow：h-shadow v-shadow blur spread color inset;

其中box-shadow的属性：
h-shadow: 水平阴影的位置。
v-shadow:垂直阴影的位置。
blur：模糊距离
spread：阴影的尺寸
color：阴影的颜色
1.h-shadow：这个值指定了阴影的水平偏移量。即在x轴上阴影的位置。如果是正数阴影会出现在元素的右边，如果是负值阴影出现在元素的左边。
正值

<style>.box{width: 100px;height: 100px;background: red;}.shadow1{box-shadow:10px 5px 5px #bb2222;}
</style>
<div class="box shadow1">10px</div>

负值：

<style>.box{width: 100px;height: 100px;background: red;}.shadow1{box-shadow:-10px 5px 5px #bb2222;}
</style>
<div class="box shadow1">-10px</div>

2.v-shadow：这个值指定了阴影的垂直偏移量。即在y轴上阴影的位置。如果是正值阴影会出现在元素的上边，如果是负值阴影会出现在元素的下边。
正值：

<style>.box{width: 100px;height: 100px;background: red;}.shadow1{box-shadow:10px 5px 5px #bb2222;}
</style>
<div class="box shadow1">5px</div>

负值：

<style>.box{width: 100px;height: 100px;background: red;}.shadow1{box-shadow:10px -5px 5px #bb2222;}
</style>
<div class="box shadow1">-5px</div>

3、blur：这个值代表阴影的模糊半径，如果是“0”意味着阴影是完全实心的，没有任何模糊效果。该值越大，实心度越小，阴影越朦胧和模糊，该值不支持负数。
值为0：

<style>.box{width: 100px;height: 100px;background: red;}.shadow1{box-shadow:10px 5px 0px #bb2222;}
</style>
<div class="box shadow1">0px</div>

值不等于0：

<style>.box{width: 100px;height: 100px;background: red;}.shadow1{box-shadow:10px 5px 10px #bb2222;}
</style>
<div class="box shadow1">10px</div>

4.spread这个值代表着阴影的尺寸。这个值可以被看作是从元素到阴影的距离。如果正值会在元素的四个方向延伸阴影。负值会使阴影变得比元素本身尺寸还要小。默认值“0”会让阴影变得得和元素的大小一样。

<style>.box{width: 100px;height: 100px;background: red;}.shadow1{box-shadow:0px 0px 5px 0px rgba(0,0,0,0.8);}.shadow2{box-shadow:0px px 5px 10px rgba(0,0,0,0.8);}
<
</style>
<div class="box shadow1">0px</div>
<div class="box shadow2">12px</div>

5.color：这个值是指定阴影的颜色

<style>.box{width: 100px;height: 100px;background: red;}.shadow1{box-shadow:10px 5px 5px red;}.shadow2{box-shadow:10px 5px 5px green;}
</style>
<div class="box shadow1">0px</div>
<div class="box shadow2">20px</div>

以上在html文件的主体body可以运行出来效果！！！

CSS3 边框阴影box-shadow相关推荐

css3边框阴影详解
https://www.cnblogs.com/nyw1983/p/11348568.html
好程序员web前端分享CSS3边框
好程序员web前端分享CSS3 边框,通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 - 并且不需使用设计软件,比如 PhotoShop. 在本章中,您将学到以下边框属性: b ...
第95天：CSS3 边框、背景和文字效果
1.CSS3边框: border-radius:CSS3圆角边框.在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,bo ...
html字体投影效果,IE10中的CSS3文字阴影（text-shadow）属性
IE10浏览器在Windows开发者预览版中引入了支持硬件加速的CSS3文字阴影(text - shadow)属性.文字阴影是Web开发中最重要的需求功能之一.它使得以前在标准中难以实现的文字效果以更 ...
Box Shadow(阴影)-Css3写法示例
Box Shadow(阴影)-Css3演示 -moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; b ...
Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...
html中投影效果图,利用CSS3（box shadow）制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
CSS3 Box Shadow
语法: box-shadow:1px 2px 3px #FFF; box-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色: 兼容性 Firefox支持 ...
css圆角框四周阴影,css3圆角边框，边框阴影
border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...

CSS3 边框阴影box-shadow

CSS3 边框阴影box-shadow相关推荐

最新文章

热门文章