Question

我有这个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
}

如何让图形的边缘更圆？

Answer 1

您需要使用各种边框半径样式。这是一个生成CSS的好工具：

http://border-radius.com/

Answer 2

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

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

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

您可以在caniuse.com

上看到浏览器支持

12px可调，并将确定边框的半径。

像往常一样，MDN Documentation

中有更详细的信息

如何使边缘圆

2 个答案: