테두리가있는 요소를 "stiched"로 내부 객체의 외부 경계에 만들기

Question

div가있는 객체 (또는 다른 요소)를 테두리로 만들고, 해당 div 내부의 객체의 바깥 경계에«stiched»하는 방법은 무엇입니까? 당신은 단지 CSS와 자바 스크립트 플러그인없이 수행 할 경우

Answer 1

, 당신은 예를 들어 다음과 같은 작업을 많이 함께 할 수 있습니다 : 예를 들어

Demo

HTML

<div id="main"> 
    <div class="red"><div class="content">Red</div></div> 
    <div class="green"><div class="content">Green</div></div> 
    <div class="blue"><div class="content">Blue</div></div> 
    <div class="black"><div class="content">Black</div></div> 
</div> 

CSS

#main {position:relative;} 
.black, .red, .blue, .green { 
    position:absolute; 
    border:3px dotted #000; 
    background:#FFF; 
    z-index:10; 
} 
.content {position:relative;margin:10px;} 
.black {top:300px;left:103px;z-index:9;} 
.black .content {height:180px;width:280px;background:#000;} 
.blue{ top:50px;left:200px;border-bottom:none;} 
.blue .content {height:30px;width:30px;background:#009;} 
.red{top:0px;left:0px;} 
.red .content {height:280px;width:80px;background:#F00;} 
.green{top:100px;left:103px;border-left:none;border-bottom:none;} 
.green .content{height:180px;width:180px;background:#070;} 

여기에서는 각 요소의 위치와 크기를 설정해야합니다. 그런 다음 겹쳐 놓은 각 테두리의 각 표시를 조정해야합니다.

약간 못 생겼지 만 그게 효과적이야.