1

我有一个带有圆形边框的框，它需要从 80% 不透明开始并逐渐淡化，直到底部为 20% 不透明。同时，边框需要从 80% 不透明开始，以透明结束。

我找到了一些关于边框渐变填充的 CSS3 信息，并使用 rgba 进行了尝试，但它在 Firefox 上不起作用，这是我的大多数目标受众使用的浏览器。我发现了两种使用伪类的方法，但都不是完美的。我希望，如果发布这些方法并说出问题所在，有人可以建议如何改进它们。

如果可能的话，我需要通过 CSS 来完成，而不需要在 HTML 中添加额外的分区或类似的东西。

HTML

 <div class="box">
  <div>
    <h3>Box 1</h3>        
    <div>
      <p>Content.</p>
      <p>More content.</p>
    </div>
  </div>
</div>

CSS 方法 1

.box, .box:before, .box:after{
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    behavior: url(htc/border-radius.htc);
}
.box:before{
    background-image:-moz-linear-gradient(top,rgba(69,174,189,0.8),rgba(69,174,189,0));
    background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(69,174,189,0.8)),to(rgba(69,174,189,0)));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=rgba(69,174,189,0.8),endColorStr=rgba(69,174,189,0));
    content: "";
    position: absolute;
    top: -4px; left: -4px; bottom: -4px; right: -4px;
    z-index: -2;
}
.box:after{
    background-image:-moz-linear-gradient(top,rgba(76,91,198,0.8),rgba(76,91,198,0.2));
    background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(76,91,198,0.8)),to(rgba(76,91,198,0.2)));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=rgba(76,91,198,0.8),endColorStr=rgba(76,91,198,0.2));
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    z-index: -1;
}
.box{
    margin-top: 4px;
    margin-bottom: 6px;
    color: #ffffff;
    position: relative;
}
.box div{
    background-color:transparent;
}
.box div div{
    padding: 0 7px;
}

.box h3 {
    border: 0;
    background:transparent;
    color: #ffffff;
}

这段代码做了我想要的，但盒子的透明度并不出色，因为另一个盒子在它后面。在较小的盒子上还不错，但对于内容很多的盒子来说，它看起来不太好。

CSS 方法 2

.box, .box:before, .box:after{
    -moz-border-radius: 12px 12px 0 0;
    -webkit-border-radius: 12px 12px 0 0;
    border-radius: 12px 12px 0 0;
    behavior: url(htc/border-radius.htc);
}
.box{
    margin-bottom: 9px;
    margin-top: 4px;
    background-image:-moz-linear-gradient(top,rgba(76,91,198,0.8),rgba(76,91,198,0.2));
    background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(76,91,198,0.8)),to(rgba(76,91,198,0.2)));
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=rgba(76,91,198,0.8),endColorStr=rgba(76,91,198,0.2));
    color: #ffffff;
    position: relative;
    border: 4px solid transparent;
    border-top-color: rgba(69,174,189,0.8);
}
.box:before, .box:after{
    content: "";
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: -4px;
    width: 4px;
    background-image:-moz-linear-gradient(top,rgba(69,174,189,0.8),rgba(69,174,189,0));
    background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(69,174,189,0.8)),to(rgba(69,174,189,0)));
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=rgba(69,174,189,0.8),endColorStr=rgba(69,174,189,0));
}
.box:after{
    left: auto;
    right: -5px;
}

.box div{
    background-color: transparent;
}

.box div div{
    padding: 0 5px;
}

.box h3{
    border: 0;
    background:transparent;
    color: #ffffff;
}

这个盒子的透明度很好，尽管边框不太好。主要问题是底部有一个我无法弄清楚的小间隙，左右的“边框”与顶部边框重叠，向下移动意味着它们仍然没有连接到顶部边框。

第一个选项效果最好，但正如我上面提到的，它并不完美。有什么方法我不能让这些中的任何一个更好地工作，还是我采取了完全错误的方法？

4

1 回答 1

1

如果您愿意不将渐变应用到顶部和底部边框，您可以这样做。这只是意味着您的渐变在边界半径之间开始和停止。

对我来说看起来不错，但我不知道您的具体用例。此外，显然 IE9 及更早版本不支持渐变。

http://jsfiddle.net/vXzRz/2/

.box {
    position: relative;    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(159, 195, 192, 0.8)), to(rgba(159, 195, 192, 0.2)));
    background: -webkit-linear-gradient(top, rgba(159, 195, 192, 0.8), rgba(159, 195, 192, 0.2));
    background: -moz-linear-gradient(top, rgba(159, 195, 192, 0.8), rgba(159, 195, 192, 0.2));
    background: -ms-linear-gradient(top, rgba(159, 195, 192, 0.8), rgba(159, 195, 192, 0.2));
    background: -o-linear-gradient(top, rgba(159, 195, 192, 0.8), rgba(159, 195, 192, 0.2));
    border-radius: 12px;
}
.box > div {
    border-radius: 12px;
}


.box:before,
.box:after {
    content: '';
    position:absolute;
    width: 4px;
    top: 13px;
    bottom: 9px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(14, 131, 123, .8)), to(rgba(14, 131, 123, 0)));
    background: -webkit-linear-gradient(top, rgba(14, 131, 123, .8), rgba(14, 131, 123, 0));
    background: -moz-linear-gradient(top, rgba(14, 131, 123, .8), rgba(14, 131, 123, 0));
    background: -ms-linear-gradient(top, rgba(14, 131, 123, .8), rgba(14, 131, 123, 0));
    background: -o-linear-gradient(top, rgba(14, 131, 123, .8), rgba(14, 131, 123, 0));
}
.box:before {
    left: -4px;
}
.box:after {
    right: -4px;
}
.box > div:before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    height: 13px;
    width: 100%;
    border-top-left-radius: 17px;
    border-top-right-radius: 17px;
    border: 4px solid rgba(14, 131, 123, .8);
    border-bottom: none;
}

编辑：

在当前版本的 Chrome、FF、IE10、Safari、Opera 中测试

于 2013-11-01T03:34:43.690 回答