CSS - 如何使用漸變背景設計圓形區域？

Question

我想問你有關的建議，如何使用CSS樣式上面的圖片背景，什麼是最好的做法。

我通過我的設計得到了佈局，這是一個背景 - 有銀顏色爲白色（從上到下）漸變，帶有邊框相同。

左上角和右上角四捨五入（就像3px）。

我試圖找到最有效的方法，如何編寫這個東西，可惜還是無法找到最好的辦法......

Answer 1

我最喜歡去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); 
} 

---

基於在評論你的漸變邊界問題，你也可以使用箱陰影來模擬邊界：

.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 */ 
} 

Answer 2

你的元素用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*/; 

} 

Answer 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寬的圖像。由於瀏覽器無需下載較大的圖片，因此這會讓您的網頁加載速度稍微快一點。