사용자 정의 국자 테두리 스타일 - 반응 형, 사용자 정의 및 동적 테두리 스타일 - 높이 맞춤, 맞춤 테두리 모서리 - 이중 획

Question

CSS 또는 jQuery에서 사용자 지정 테두리 스타일을 만들 수있는 방법이 있습니까? 아래 이미지처럼

: 여기

Answer 1

는 http://jsfiddle.net/zjw3pg2e/5/ 당신을 위해이 일을합니까 ... 바이올린입니까?

body { 
    background: #D8D8D8; 
} 
.corner { 
    background:white; 
    height:20px; 
    width:20px;  
    position:absolute; 
} 
#sw { 
    left: -2px; 
    bottom: -2px; 
    border-radius: 0px 20px 0px 0px; 
    border-top: 2px solid white; 
    border-right: 2px solid white; 
    background:#D8D8D8; 
} 
#se { 
    right: -2px; 
    bottom: -2px; 
    border-radius: 20px 0px 0px 0px; 
    border-top: 2px solid white; 
    border-left: 2px solid white; 
    background:#D8D8D8; 
} 
#nw { 
    left: -2px; 
    top: -2px; 
    border-radius: 0px 0px 20px 0px; 
    border-bottom: 2px solid white; 
    border-right: 2px solid white; 
    background:#D8D8D8; 
} 
#ne { 
    right: -2px; 
    top: -2px; 
    border-radius: 0px 0px 0px 20px; 
    border-bottom: 2px solid white; 
    border-left: 2px solid white; 
    background:#D8D8D8; 
} 

.box { 
    position:relative; 
    height:200px; 
    width:200px; 
    border: solid 2px white; 
    background:#D8D8D8; 
    border-radius: 5px -5px 5px 5px; 
} 
.box2 { 
    position:relative; 
    height:160px; 
    width:160px; 
    overflow:hidden; 
    left: 20px; 
    top: 20px; 
} 
.box2:before{ 
    content:''; 
    position:absolute; 
    left:0; 
    margin:-20px; 
    height:40px; 
    width:40px; 
    border-radius:100%; 
    background:#D8D8D8; 
    box-shadow:160px 0 0 #D8D8D8, 
    0 160px 0 #D8D8D8, 
    160px 160px 0 #D8D8D8, 
    0 0 0 500px white; 
} 

HTML 다음 포괄 상자, ne, nw, se를 들어, sw가 반전 된 모서리 것을

<div class="box"> 
    <div id="ne" class="corner"></div> <!--ne, nw, se, sw, are the corners--> 
    <div id="nw" class="corner"></div> <!--of first object--> 
    <div id="se" class="corner"></div> 
    <div id="sw" class="corner"></div> 
    <div class="box2"></div> <!--box2 is the inner border object--> 
</div> 

참고.

box2의 경우 진행 상황을 설명하는 것이 다소 어렵습니다. 내 제안은 상자 그림자가 거꾸로 된 테두리의 환영을주는 방식을 이해하기 위해 상자 그림자뿐만 아니라 픽셀 위치의 색을 가지고 놀아 보는 것입니다.

일단 마음에 들지 않으면 원하는대로 크기를 변경하는 것이 매우 쉽습니다.