box-shadow参数以及使⽤
参数: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;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* ⽼的 Firefox */
box-shadow: 10px 10px 5px #888888;
}
表明:颜⾊为#888888的阴影向下向右外⾯偏移,模糊为5像素
其中的参数说明如下:
none:默认值,元素没有任何阴影效果。
inset:阴影类型,可选值。如果不设置,其默认的投影⽅式是外阴影;如果取其唯⼀值“inset”,就是给元素设置内阴影。
x-offset:阴影⽔平偏移量,其值可以是正负值。如果取正值,则阴影在元素的右边,反之取负值,阴影在元素的左边。
box shadow怎么设置y-offset:阴影垂直偏移量,其值可以是正负值。如果取正值,则阴影在元素的底部,反之取负值,阴影在元素的顶部。
blur-radius:阴影模糊半径,可选参数。其值只能是正值,如果取值为“0”时,表⽰阴影不具有模糊效果,如果取值越⼤,阴影的边缘就越模糊。
spread-radius:阴影扩展半径,可选参数。其值可以是正负值,如果取值为正值,则整个阴影都延展扩⼤,反之取值为负值,则整个阴影都缩⼩。
color:阴影颜⾊,可选参数,如果不设定任何颜⾊时,浏览器会取默认⾊,但各浏览器默认⾊不⼀样,特别是在Webkit内核下的浏览器将⽆⾊,也就是透明,建议不要省略这个参数。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论