码迷,mamicode.com
首页 > 其他好文 > 详细

box-shadow参数以及使用

时间:2017-05-02 18:19:10      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:read   属性   元素   tracking   底部   水平   set   -o   唯一值   

参数:box-shadow:none | [inset  x-offset y-offset blur-radius spread-radius color], [inset  x-offset y-offset blur-radius spread-radius color] 

text-shadow 的用法和box-shadow一样。。。。

box-shadow属性可以使用一个或多个投影,如果使用多个投影时必须使用逗号“,”隔开。

例如:

div
{
width:300px;
height:100px;

-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}

表明:颜色为#888888的阴影向下向右外面偏移,模糊为5像素



其中的参数说明如下:


none:默认值,元素没有任何阴影效果。


inset:阴影类型,可选值。如果不设置,其默认的投影方式是外阴影;如果取其唯一值“inset”,就是给元素设置内阴影。


x-offset:阴影水平偏移量,其值可以是正负值。如果取正值,则阴影在元素的右边,反之取负值,阴影在元素的左边。


y-offset:阴影垂直偏移量,其值可以是正负值。如果取正值,则阴影在元素的底部,反之取负值,阴影在元素的顶部。


blur-radius:阴影模糊半径,可选参数。其值只能是正值,如果取值为“0”时,表示阴影不具有模糊效果,如果取值越大,阴影的边缘就越模糊。


spread-radius:阴影扩展半径,可选参数。其值可以是正负值,如果取值为正值,则整个阴影都延展扩大,反之取值为负值,则整个阴影都缩小。


color:阴影颜色,可选参数,如果不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在Webkit内核下的浏览器将无色,也就是透明,建议不要省略这个参数。
 
 

box-shadow参数以及使用

标签:read   属性   元素   tracking   底部   水平   set   -o   唯一值   

原文地址:http://www.cnblogs.com/chenmiaosong/p/6797192.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!