웹디자인 다중경계선 여러개 선이 겹친 형태 css box-shadow 이용

다중경계선 다중선

box-shadow 로 적용

box-shadow의 장점은 콤마구분으로 경계선을 원하는 만큼 아주 쉽게 여러개 만들 수 있다.

 

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

.class { 
width:200px;
height:200px;
margin :0 auto;
margin-top:40px;
background:yellowgreen;
box-shadow:0 0 0 20px #655,
           0 0 0 35px deeppink;
}

 

경계선css 만 따로 뽑아서 보자면

.class { 
background:yellowgreen;
box-shadow:0 0 0 20px #655,
           0 0 0 35px deeppink;
}

경계선 한개를 추가 한다음 다음 한개를 더 추가할때 사이즈는

첫번째 경계선이 20px이면 그 다음 경계선을 15px 추가 하고 싶으면

첫번째 경계선 20px + 15px = 35px 로 설정해준다.