2013-01-22 3 views
-3

JSF 페이지에서 제목 배경으로 사용하는이 CSS 코드가 있습니다.가장자리를 둥글게 만드는 방법

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

그림의 가장자리를 더 둥글게 만들 수있는 방법은 무엇입니까?

+0

평소 훨씬 더 자세한 정보는 검색을 시도해 봤어으로 당신의 마음에 드는 검색 엔진에 ? –

+0

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

답변

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

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

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

당신은 12px은 조정 가능하며 경계의 반경을 결정합니다 caniuse.com

의 브라우저 지원을 볼 수 있습니다.

MDN Documentation

2

다양한 테두리 반지름 스타일을 사용해야합니다. 여기에 CSS를 생성 할 수있는 좋은 도구입니다 :

http://border-radius.com/

관련 문제