CSS框阴影底部 - 开卷题库

小开

你可以使用两个元素，一个在另一个里面，并给外层元素overflow: hidden和宽度等于内部元素，并在底部填充，以便所有其他一侧的阴影被“切断”。

#outer {
width: 100px;
overflow: hidden;
padding-bottom: 10px;
}


#outer > div {
width: 100px;
height: 100px;
background: orange;


-moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}

或者，浮动外部元素，使其缩小到内部元素的大小。看:http://jsfiddle.net/QJPd5/1/

小开

最佳答案

这样做:

box-shadow: 0 4px 2px -2px gray;

它实际上更简单，无论你设置模糊(第三个值)，设置扩散(第四个值)为它的负数。

小开

试试这个

-moz-box-shadow:0 5px 5px rgba(182, 182, 182, 0.75);
-webkit-box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);
box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);

你可以在http://jsfiddle.net/wJ7qp/中看到它

小开

试着让盒子阴影完全在你的控制之下。

    <html>


<head>
<style>
div {
width:300px;
height:100px;
background-color:yellow;
box-shadow: 0 10px black inset,0 -10px red inset, -10px 0 blue inset, 10px 0 green inset;
}
</style>
</head>
<body>
<div>
</div>
</body>


</html>

这将适用于外部盒阴影以及。