渐变框阴影和边框的 CSS答案

【问题标题】：CSS for gradient box shadow and borders渐变框阴影和边框的 CSS
【发布时间】：2011-10-18 20:36:54
【问题描述】：

是否可以在 CSS 中做到这一点：

【问题讨论】：

【解决方案1】：

这是我的 2 美分：

HTML：

<div class="upperDiv"></div>
<div class="lowerDiv"></div>

CSS：

.upperDiv {
width:500px;
height: 40px;

background-image: -ms-radial-gradient(center bottom, ellipse farthest-corner, #E4E4E4 0%, #FDFDFD 150%);
background-image: -moz-radial-gradient(center bottom, ellipse farthest-corner, #E4E4E4 0%, #FDFDFD 150%);
background-image: -o-radial-gradient(center bottom, ellipse farthest-corner, #E4E4E4 0%, #FDFDFD 150%);
background-image: -webkit-gradient(radial, center bottom, 0, center bottom, 567, color-stop(0, #E4E4E4), color-stop(1.5, #FDFDFD));
background-image: -webkit-radial-gradient(center bottom, ellipse farthest-corner, #E4E4E4 0%, #FDFDFD 150%);
background-image: radial-gradient(center bottom, ellipse farthest-corner, #E4E4E4 0%, #FDFDFD 150%);

}

.lowerDiv {
width:500px;
height: 40px;

background-image: -ms-radial-gradient(center top, ellipse farthest-corner, #FDFDFD 0%, #F0F0F0 80%);
background-image: -moz-radial-gradient(center top, ellipse farthest-corner, #FDFDFD 0%, #F0F0F0 80%);
background-image: -o-radial-gradient(center top, ellipse farthest-corner, #FDFDFD 0%, #F0F0F0 80%);
background-image: -webkit-gradient(radial, center top, 0, center top, 567, color-stop(0, #FDFDFD), color-stop(0.8, #F0F0F0));
background-image: -webkit-radial-gradient(center top, ellipse farthest-corner, #FDFDFD 0%, #F0F0F0 80%);
background-image: radial-gradient(center top, ellipse farthest-corner, #FDFDFD 0%, #F0F0F0 80%);
}

宽度和高度只是为了让你能看到一些东西。我认为这适用于大多数现代浏览器（虽然有点冗长）

【讨论】：

【解决方案2】：

这是我整理的一些东西。如果你愿意，你可以随意摆弄它。

http://jsfiddle.net/Gk6xJ/

【讨论】：

【解决方案3】：

没有真正回答你的问题，但如果你需要这样做（并且不必在 css 中），我想你已经在其他程序中创建了它，所以你可能会发现这很有用：@987654321 @

【讨论】：

【解决方案4】：

我认为这可以通过两个 div 来解决，每个 div 都有一个radial gradient。这是带有渐变的tool to experiment。它还提供特定于供应商的代码。

【讨论】：

【解决方案5】：

我正在一个网站上做类似的事情：

width: 60%; height: 20px; background-image: -moz-radial-gradient(center top , ellipse farthest-side, rgba(100, 100, 100, 0.5), rgba(100, 100, 100, 0) 75%), -moz-radial-gradient(center top , ellipse farthest-side, rgba(200, 200, 200, 0.5), rgba(200, 200, 200, 0)), -moz-radial-gradient(center top , ellipse farthest-side, rgba(200, 200, 200, 0.3), rgba(200, 200, 200, 0)); background-repeat: no-repeat; background-size: 100% 5px, 100% 10px, 100% 15%;

【讨论】：