CSS - 如何使用渐变背景设置圆形区域的样式？答案

【问题标题】：CSS - how to style rounded area with a gradient background?CSS - 如何使用渐变背景设置圆形区域的样式？
【发布时间】：2012-04-20 04:01:54
【问题描述】：

我想问你一些建议，如何用 CSS 设置上面的图像背景样式，最佳做法是什么。

我的设计师设计了一个布局，这是一个背景 - 有一个从银色到白色（从上到下）的渐变，与边框相同。

左上角和右上角是圆角的（类似于 3px）。

我正在尝试找到最有效的方法，如何编码这个东西，但不幸的是仍然找不到最好的方法......

【问题讨论】：

如果你haven't found the best approach你试过什么方法？

标签： html css background

【解决方案1】：

在你的元素上使用 css：

.gradient-bg {
   /* fallback/image non-cover color */
   background-color: /*start color*/; 

   /* fallback image */
   background-image: url(images/fallback-gradient.png); 

  /* Safari 4+, Chrome 1-9 */
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(/*start color*/), to(/*end color*/));

  /* Safari 5.1+, Mobile Safari, Chrome 10+ */
  background-image: -webkit-linear-gradient(top, /*start color*/, /*end color*/); 

  /* Firefox 3.6+ */
  background-image: -moz-linear-gradient(top, /*start color*/, /*end color*/);

  /* IE 10+ */
  background-image: -ms-linear-gradient(top, /*start color*/, /*end color*/);

  /* Opera 11.10+ */
  background-image: -o-linear-gradient(top, /*start color*/, /*end color*/);

  -moz-border-radius-topleft: /*pixel radius*/;
  -moz-border-radius-topright:/*pixel radius*/;

  -webkit-border-top-left-radius: /*pixel radius*/;
  -webkit-border-top-right-radius: /*pixel radius*/;

}

【讨论】：

【解决方案2】：

我最喜欢的 CSS3 样式是 CSS3Please。他们使用如下类：

.box_round {
  -webkit-border-radius: 3px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
     -moz-border-radius: 3px; /* FF1-3.6 */
          border-radius: 3px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

  /* useful if you don't want a bg color from leaking outside the border: */
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

.box_gradient {
  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #444444, #999999); /* IE10 */
  background-image:      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
  background-image:         linear-gradient(to bottom, #444444, #999999);
}

根据您在 cmets 中的渐变边框问题，您可以改用 box-shadow 来模拟边框：

.box_shadow {
  -webkit-box-shadow: 0px 0px 4px 0px #ffffff; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
     -moz-box-shadow: 0px 0px 4px 0px #ffffff; /* FF3.5 - 3.6 */
          box-shadow: 0px 0px 4px 0px #ffffff; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}

【讨论】：

这看起来很不错，而且也很好用，谢谢！但只有一个问题 - 是否可以在渐变中添加左右边框，并且在这些边框上也使用渐变？
CSS3 Gradient Borders 将是您正在寻找的。span>

【解决方案3】：

您需要使用边界半径规则。您可以通过w3c了解它。

要查看其使用示例，请参阅http://jsbin.com/aresif/edit#html,live。随意玩弄它。

div.someClassName {
   background-image: url("YourImageGoesHere.jpg");
   background-repeat: repeat-x;
   border: 1px solid red;
   border-radius: 1em 1em 0 0;
}

轻微优化

该图像似乎是一个简单的垂直渐变。让它像它一样宽是没有意义的，因为在 CSS 中，您可以使用 background-repeat 规则重复背景图像。您可以在w3c 阅读有关它的信息。我首先将该图像更改为 1px 宽的图像。由于浏览器不需要下载更大的图像，这将使您的页面加载速度稍快一些。

【讨论】：

为什么要使用图像，而不是各种渐变 CSS3 标签？