CSS : 경사가있는 사영 테두리?

CSS를 사용하여 완벽한 경사 경계선을 만들려고합니다.CSS : 경사가있는 사영 테두리?

기본적으로 테두리를 약간 올리고 그라디언트 색상이 있어야합니다.

내가 가진 이슈는 내가 가장 가까운 것으로서 border-style:ridge;을 사용하고 있지만 색상/그라디언트가 실제로 좋지 않고 베벨 스타일이 좋지 않다는 것입니다.

더 밝은 색이 어두운 색을 만나는 반경이있는 모서리에 선이 있습니다!

이 작업 FIDDLE

이 사용 CSS를 할 수있는 더 좋은 방법이 무엇입니까?

도움을 주시면 감사하겠습니다.

편집 : 당신은 그라데이션 국경을 원하는 경우에

.ttle{ 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    border: 4px solid #c2924e; 
    border-style: ridge; 
    width:100%; 
height:auto; 
padding:10px; 
min-height:150px; 
border-bottom-left-radius: 3em; 
border-top-right-radius: 3em; 
background-color:#000; 
position:relative; 
    }

출처

2016-08-23 Jackson

질문 * *] (https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). [** 예제 또는 사이트 링크 **] (http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work- can-i-just-paste-a-link-to-it) 링크가 무효화 될 경우 같은 문제가있는 다른 미래 SO 사용자에게는 귀하의 질문이 가치가 없을 것입니다. –

솔직히, 나는 SVG를 사용할 것이다. –

@Paulie_D, 텍스트 인 div의 내용이 동적이지 않은 경우 SVG를 사용합니다. – Jackson

, 당신은 외부 DIV에 내부 사업부 및 그라데이션 배경을 사용하여 청소기 테두리 효과를 달성 할 수

이것은 CSS 코드입니다. 그게 당신에게 원하는 효과를 줄 것입니다. 해당 반경을 염두에 두십시오. 내부 반경은 "경계선"의 폭을 일정하게 유지하려면 약간 줄여야합니다. 약간의 브라우저에서이 작업을 수행해야 할 수도 있습니다. Chrome & FF/Mac에서 테스트되었습니다. 바람직하게는 [** 스택 코드에서 ** 질문 자체 ** 재현하는 데 필요한 가장 짧은 코드를 포함해야하는 코드의 도움을 구하고

https://jsfiddle.net/treetop1500/nL4t9jLw/

.ttle { 
 
    background: red; 
 
    /* For browsers that do not support gradients */ 
 
    background: -webkit-linear-gradient(#c2924e, #7c5b2d); 
 
    /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(#c2924e, #7c5b2d); 
 
    /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(#c2924e, #7c5b2d); 
 
    /* For Firefox 3.6 to 15 */ 
 
    background: linear-gradient(#c2924e, #7c5b2d); 
 
    /* Standard syntax */ 
 
    width: 90%; 
 
    height: auto; 
 
    padding: 5px; 
 
    border-bottom-left-radius: 3em; 
 
    border-top-right-radius: 3em; 
 
    background-color: #000; 
 
} 
 
.inner { 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    border: none; 
 
    width: 100%; 
 
    height: auto; 
 
    padding: 10px; 
 
    min-height: 150px; 
 
    border-bottom-left-radius: 2.8em; 
 
    border-top-right-radius: 2.8em; 
 
    background-color: #000; 
 
}

<div class="ttle"> 
 
    <div class="inner"> 
 

 
    </div> 
 
</div>

출처

2016-08-23 11:16:42

그냥 찾고있는 것 ... – Jackson

<div class="title"> 
</div> 

.title { 
border:5px solid #FC0; 
display: inline-block; 
padding: .5em 2em .55em; 
-webkit-border-radius: .5em; 
-moz-border-radius: .5em; 
border-radius: .5em; 
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
box-shadow: 0 1px 2px rgba(0,0,0,.2); 
}

출처

2016-08-23 12:14:19

CSS : 경사가있는 사영 테두리?

답변

관련 문제