CSS框阴影底部

我该怎么做呢?我想让我的元素看起来好像有阴影下划线。我不希望其他3条边有阴影。

你可以使用两个元素，一个在另一个里面，给外面的元素一个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/

2010-12-30 08:39:30

这样做:

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

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

2011-06-05 21:08:28

试试这个

-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/上看到它

2011-08-14 23:32:53

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

    <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>

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

2012-12-03 10:21:45

CSS框阴影底部

推荐文章

最新文章

标签