我正在使用box-shadow创建一个内部阴影......
box-shadow: inset 0 0 10px #000000;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
...但希望内部阴影只从底部进入.我尝试了几种尝试使这项工作的方法,但不能......我怎么用盒子阴影做这个？
ACJ*_*ACJ 128
对于定义展开距离的第四个长度使用负值.这经常被忽视,但所有主流浏览器都支持.看到这个小提琴的结果.
div{
background:red;
height:100px;
width:200px;
-moz-box-shadow: inset 0 -10px 10px -10px #000000;
-webkit-box-shadow: inset 0 -10px 10px -10px #000000;
box-shadow: inset 0 -10px 10px -10px #000000;
}<!doctype html>
<div></div>Shl*_*sid 14
仅在顶部:
-moz-box-shadow: inset 0 10px 10px -10px grey;
-webkit-box-shadow: inset 0 10px 10px -10px grey;
box-shadow: inset 0 10px 10px -10px grey;
仅在底部:
-moz-box-shadow: inset 0 -10px 10px -10px grey;
-webkit-box-shadow: inset 0 -10px 10px -10px grey;
box-shadow: inset 0 -10px 10px -10px grey;
仅在顶部和底部:
-moz-box-shadow: inset 0 10px 10px -10px grey,
inset 0 -10px 10px -10px grey;
-webkit-box-shadow: inset 0 10px 10px -10px grey,
inset 0 -10px 10px -10px grey;
box-shadow: inset 0 10px 10px -10px grey,
inset 0 -10px 10px -10px grey;
快速示例
.shadow-top {
-moz-box-shadow: inset 0 10px 10px -10px grey;
-webkit-box-shadow: inset 0 10px 10px -10px grey;
box-shadow: inset 0 10px 10px -10px grey;
}
.shadow-bottom {
-moz-box-shadow: inset 0 -10px 10px -10px grey;
-webkit-box-shadow: inset 0 -10px 10px -10px grey;
box-shadow: inset 0 -10px 10px -10px grey;
}
.shadow-top-bottom {
-moz-box-shadow: inset 0 10px 10px -10px grey,
inset 0 -10px 10px -10px grey;
-webkit-box-shadow: inset 0 10px 10px -10px grey,
inset 0 -10px 10px -10px grey;
box-shadow: inset 0 10px 10px -10px grey,
inset 0 -10px 10px -10px grey;
}
div { display:inline-block; margin-right:15px; width:150px; height:100px; background:yellow; }<div class='shadow-top'></div>
<div class='shadow-bottom'></div>
<div class='shadow-top-bottom'></div>