关于box-shadow

原创 cheese奶酪凌 随笔 零碎知识点 143阅读 2018-05-08 10:52:51 举报

参考网址

1.box-shadow
2.css box-shadow详解,以及box-shadow立体按钮,box-shadow 四周阴影,box-shadow 单边阴影的实现

基本情况


基础

box-shadow:offset-x | offset-y | blur-radius | spread-radius | color

box-shadow:水平方向 垂直方向 阴影虚化(不为负数) 阴影放大收缩(可选) 颜色 外部阴影(内部阴影)
默认阴影在边框外部,没有写就相当于在外部,如果需要内部阴影,则写明inset;

例子

四周阴影

1.用运用blur(模糊距离)(推荐)
四周阴影(将颜色提到前面,且将h-shadow,v-shadow设为0px,实现四周阴影)
div{
width:250px;
height:250px;
background:greenyellow;
box-shadow:black 0px 0px 10px;
}
2.用逗号分隔,显示多个阴影,但是不是很好看
.box9{box-shadow: 5px 0 5px #ff0000,0px 5px 5px green,-5px 0 5px blue,0 -5px 5px #08d9f3;}

疑问

1.outset是指外部,但是我在css中直接写明outset,显示的是这个css是失效的。不写则可以显示。
2.spread-radius,这个参数有让阴影扩大缩小的作用:取正值时,阴影扩大;取负值时,阴影收缩。默认为0,此时阴影与元素同样大。
但是实际上,我写明负值时,css有效,但是看不到具体表现。查看下发现,这个值最小为0;

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复