继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

CSS3学习笔记--第二课时--box-shadow

赤拔丶姚
关注TA
已关注
手记 3
粉丝 1
获赞 14
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

图片描述

注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的。

//外部阴影
.box_shadow{
  box-shadow:4px 2px 6px #333333; 
}
//内部阴影
.box_shadow{
  box-shadow:4px 2px 6px #333333 inset; 
}
//添加多个阴影
.box_shadow{
    box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
}

1、阴影模糊半径与阴影扩展半径的区别

阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴>影不具有模糊效果,其值越大阴影的边缘就越模糊;

阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;

打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP