CSS3盒子阴影 box-shadow属性

第一:box-shadow的语法以及参数
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]

参数详解:
none:默认值没有任何阴影效果。
inset:阴影类型,可选值。如果不设置,默认的投影方式是外阴影;它有唯一值inset,设置内阴影。
x-offset:阴影水平偏移量。可正负。正,阴影在元素右边;负,阴影在元素左边。
y-offset:阴影垂直偏移量。可正负。正,阴影在元素底部;负,阴影在元素顶部。
blur-radius:阴影模糊半径,可选。只能是正。=0没有模糊效果。
spread-radius:阴影扩展半径,可选。正,整个阴影扩大;负整个阴影缩小。
color:阴影的颜色,可选。如果不设定,浏览器会取默认色,但各个浏览器的默认色不一样,特别在webkit内核下的浏览器无色,也就是透明。建议不要省略。


第二:属性使用方法

    .top{
        box-shaodw:0 -2px 0 red;
        }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值