如何使邊緣變圓

-3

我有這個CSS代碼，我用JSF頁面中的標題背景。如何使邊緣變圓

.container{ 
    background: rgb(180,221,180); /* Old browsers */ 
    background: -moz-linear-gradient(45deg, rgba(180,221,180,1) 0%, rgba(95,163,9,1) 0%, rgba(95,163,9,1) 48%, rgba(0,87,0,1) 68%, rgba(0,0,0,1) 86%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(180,221,180,1)), color-stop(0%,rgba(95,163,9,1)), color-stop(48%,rgba(95,163,9,1)), color-stop(68%,rgba(0,87,0,1)), color-stop(86%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(45deg, rgba(180,221,180,1) 0%,rgba(95,163,9,1) 0%,rgba(95,163,9,1) 48%,rgba(0,87,0,1) 68%,rgba(0,0,0,1) 86%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(45deg, rgba(180,221,180,1) 0%,rgba(95,163,9,1) 0%,rgba(95,163,9,1) 48%,rgba(0,87,0,1) 68%,rgba(0,0,0,1) 86%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(45deg, rgba(180,221,180,1) 0%,rgba(95,163,9,1) 0%,rgba(95,163,9,1) 48%,rgba(0,87,0,1) 68%,rgba(0,0,0,1) 86%); /* IE10+ */ 
    background: linear-gradient(45deg, rgba(180,221,180,1) 0%,rgba(95,163,9,1) 0%,rgba(95,163,9,1) 48%,rgba(0,87,0,1) 68%,rgba(0,0,0,1) 86%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b4ddb4', endColorstr='#000000',GradientType=1); /* IE6-9 fallback on horizontal gradient */ 
    /* 
     background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #5fa309), color-stop(1, #3b8018)); 
     background:-webkit-linear-gradient(top, #5fa309 0%, #3b8018 100%); 
     background:-moz-linear-gradient(top, #5fa309 0%, #3b8018 100%); 
     background:-o-linear-gradient(top, #5fa309 0%, #3b8018 100%); 
     background:-ms-linear-gradient(top, #5fa309 0%, #3b8018 100%); 
     background:linear-gradient(top, #5fa309 0%, #3b8018 100%); 
    */ 
    position:relative; 
    display:inline-block; 
    padding:0 20px 0 10px; 
    width:270px; 
    line-height:20px; 
    font-size:12px; 
    font-family:sans-serif; 
    text-shadow:0 1px 0 #264400; 
    font-weight:bold; 
    color:#fff 
}

我如何使圖形的邊緣更圓？

來源

2013-01-22 Peter Penzov

往常一樣，更詳細的信息你嘗試搜索您最喜愛的搜索引擎？ –

https://developer.mozilla.org/en-US/docs/CSS/border-radius？ – j08691

.roundcorners { 
    /* older webkit */ 
    -webkit-border-radius: 12px; 

    /* Older firefox */ 
    -moz-border-radius: 12px; 

    /* General support */ 
    border-radius: 12px; 
}

你可以看到caniuse.com

瀏覽器支持12px是可調的，將確定邊界的半徑。

正如MDN Documentation

來源

2013-01-22 20:47:39

您需要使用各種邊框半徑樣式。這裏是生成CSS的好工具：

http://border-radius.com/

來源

2013-01-22 20:45:58

如何使邊緣變圓

回答

相關問題