html - CSS - 如何设置带有渐变背景的圆形区域的样式？

Question

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

我的设计师设计了一个布局，这是背景 - 从银色到白色(从上到下)有一个渐变，边框也是如此。

左上角和右上角是圆的(大约 3px)。

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

Answer 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*/;

}