box 안쪽에 border-line을 넣는 방법.


이미지 이름이나 설명을 여기에 넣어주세요.

box 영역에 사진을 넣고 싶고, 그 사진위에 투명한 검정 border line를 올려넣고 싶습니다. 아래의 작성중인 코드로는 왼쪽의 이미지처럼만 나옵니다.

.box {
    border : 10px solid blue;
}

만약 오른쪽이미지와 같이 box 안쪽으로 투명으로 border line을 넣을려면 어떻게 해야할까요?

  • 2016년 03월 23일에 작성됨
    Css / visual design

  • http://jsfiddle.net을 사용해서 실제 코드를 알려주시면 도움이 될 것 같습니다.    이확영   2016.3.23 16:55     
  • 네! 질문을 수정해놨습니다.    los0731   2016.3.23 18:19     
조회수 1013


2 답변


좋아요
4
싫어요
채택취소하기

box-sizing을 border-box 로 설정하시면 box가 border를 포함합니다.

추가 답변

background 위에 border 올리고 반투명으로 보이게 하시려면 border-color를 rgba사용하시고 border-origin을 border-box로 설정해주세요.

참고로 rgba는 CSS3 라서 IE8에선 지원이 안됩니다.

추가 답변

조금 더 자세하게는 아래와 같은 방법이 있습니다. 여러가지를 동시에 적용해서 색다른 효과를 구현할수도 있구요.

  • border-color에 opacity 사용하기 (rgba/hsla)*
  • box-shadow inset으로 사용하기
  • box 내부에 absolute position인 box 만들기 (html 필요없는 :before pseudo 사용 추천)

http://codepen.io/hyunjo_on/pen/wGdojR


  • 감사합니다. 그대로 하니까. 되네요!    los0731   2016.3.23 18:12     

div box 내에 border가 들어간 div를 넣으면 될 것 같습니다.

<div class="logo">
  <div class="border">
  </div>
</div>
.logo {
  background: url(http://www.google.co.kr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png) no-repeat;
  background-size: 272px 92px;
  width: 272px;
  height: 92px;
}

.border {
  border: 1px solid red;
  height: 100%;
}

사용예: https://jsfiddle.net/oq8k7a6m/

  • 2016년 03월 23일에 작성됨
    Polyglot Programmer

  • 감사합니다. 이렇게하는 방법도 있네요!    los0731   2016.3.23 18:15     

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close