1원팁) div 선을 shadow로 처리하기 정보
1원팁) div 선을 shadow로 처리하기본문
여러개의 div 가 나열되어 있을때 border를 적용하면 아래와 같이 됩니다.
예) border:1px solid #ddd;
그림이 희미하게 나와서 잘 보이실지 모르겠지만 각 div가 연결되는 지점이 1+1 = 2px 이 되어서 두껍게 나옵니다.
그래서 보통 각 셀의 오른쪽 선을 border-right:0 으로 하고 last 에만 border-right:1px 로 처리하지요.
이렇게 해도 되는데 위와같이 한줄이 아니라 2줄일 경우 또 복잡해집니다.
어떻게든 처리가 가능하겠지만 반응형까지 고려하면 상당히 머리아파집니다.
이럴때 box-shadow로 처리하면 아래와 같이 간단하고 깔끔하게 출력됩니다.
box-shadow:
1px 0 0 0 #ddd, /* 오른쪽 선 */
0 1px 0 0 #ddd, /* 아래 선 */
1px 0 0 0 #ddd inset, /* 왼쪽 선(안쪽으로) */
0 1px 0 0 #ddd inset, /* 위쪽 선(안쪽으로) */
1px 1px 0 0 #ddd; /* 요건 오른쪽 끝에 라운딩이 생기는거 방지 */
추천
11
11
댓글 18개
팁 . 감사합니다.
팁 감사합니다 ~
좋아요 감사합니다.
헐.. 꿀팁 감사합니다!
꿀팁 감사합니다!
이런 방법이 예전에 이것때문에 고민을
스크랩! 엄청난 허니팁 이네요~
감사합니다.
헐,, 이런 방법이 있었군요~ 감사합니다^^
진짜 좋은 팁이네요 감사합니다
와... 꿀팁...
( ^ _________ ^ ) =========b
꿀팁이네요 ㅎㅎ
감사합니다
꿀팁 감사합니다 ~
감사합니다.
꿀팁!!
이거 은근 신경쓰이죠...ㅠㅠㅎㅎ 감사합니다