您的位置:首页 > Web前端 > CSS

CSS3中box-shadow属性的使用方法

2016-09-03 21:12 447 查看
1.

box-shadow属性让盒子在显示时产生阴影效果。目前为止,该属性受到了FF、Chrome、Safari、Opera浏览器的支持。

box-shadow属性的指定方式如下所示:

box-shadow:length length length color

前三个length分别指阴影离开文字的横方向距离、阴影离开文字的纵方向距离和阴影的模糊半径,color指阴影的颜色。

2.创建盒内阴影

代码如下:

<style type="text/css">

div{

    background:#FFAA00;

    box-shadow:inset 0 0 5px 5px #888;

    width:200px;

    height:100px;

}

</style>

指定盒元素的内部阴影的水平方向与垂直方向上的偏移量距离均为0,模糊半径与展开半径均为5px。

3.对盒内子元素使用阴影

即可以指定在子元素的阴影。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: