CSS盒阴影只底部
我该怎么做呢？ 我希望我的元素看起来好像有一个阴影下划线。 我不想要其他三面的阴影
做这个：
box-shadow: 0 4px 2px -2px gray; 它实际上要简单得多，你将模糊设置为（第三个值），将扩展（第四个值）设置为负值。
你可以使用两个元素，一个在另一个里面，给外面的一个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/
尝试这个
-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);
试试这个来获得你完全控制下的盒子阴影。
<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>
这也适用于外框阴影。
