[css] 두 가지 색상 테두리

Program / 글쓴이

클라이언트는 양각 된 모양을 위해 두 가지 색상 테두리를 원합니다. 한 요소에서이 작업을 수행 할 수 있습니까? 개별 테두리가있는 두 개의 DOM 요소를 쌓는 것을 피하고 싶었습니다.

답변

예 : outline속성을 사용하십시오 . 국경 밖에서 두 번째 경계 역할을합니다. 마진, 패딩 및 드롭 섀도우와 함께 불안정한 방식으로 상호 작용할 수 있습니다. 일부 브라우저에서는 브라우저 별 접두사를 사용해야 할 수도 있습니다. 그것이 그것을 선택하는지 확인하기 위해 : -webkit-outline등 (특히 WebKit은 이것을 필요로하지 않지만).

이것은 특정 브라우저의 윤곽선을 제거하려는 경우에도 유용 할 수 있습니다 (예 : 윤곽선을 그림자와 결합하려는 경우, WebKit에서는 윤곽선이 그림자 내부에 있고, FireFox에서는 외부에서 -moz-outline: 0아름다운 CSS 그림자 주위에 선이 나쁘지 않도록하는 데 유용합니다.)

.someclass {
  border: 1px solid blue;
  outline: 1px solid darkblue;
}

편집 : 어떤 사람들은 outlineIE <8과 잘 어울리지 않는다고 말했습니다 . 이것은 사실입니다. IE <8을 지원하는 것은 실제로해야 할 일이 아닙니다.

답변

이것은 매우 가능합니다. 약간의 CSS 속임수가 필요합니다!

div.border {
  border: 1px solid #000;
  position: relative;
}

div.border:before {
  position: absolute;
  display: block;
  content: '';
  border: 1px solid red;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
<div class="border">Hi I have two border colors<br />I am also Fluid</div>

스 니펫 확장

그게 당신이 찾고있는 것입니까?

답변

또 다른 방법은 다음을 사용하는 것입니다 box-shadow.

#mybox {
box-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
-moz-box-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
-webkit-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
}

<div id="mybox">ABC</div>

여기에서 예를 참조 하십시오.

답변

CSS 사양에서 사용할 수있는 다양한 테두리 스타일을 사용해 보셨습니까? 귀하의 요구를 수용 할 수있는 두 가지 테두리 스타일이 이미 있습니다.

border-style: ridge;

또는

border-style: groove;

답변

외곽선은 좋지만 테두리를 모두 원할 때만 가능합니다.

하단 또는 상단에만 만들고 싶다면 사용할 수 있습니다.

<style>

  #border-top {
  border-top: 1px solid  #ccc;
  box-shadow: inset 0 1px 0 #fff;
}
</style>

<p id="border-top">This is my content</p>

그리고 하단 :

<style>

      #border-bottom {
      border-top: 1px solid  #ccc;
      box-shadow: 0 1px 0 #fff;
    }
</style>

    <p id="border-bottom">This is my content</p>

이것이 도움이되기를 바랍니다.

답변

지원되지 않고 문제가있는 개요를 사용하는 대신

  • 배경색 + 안쪽 테두리 패딩
  • 바깥 쪽 테두리의 일반 테두리입니다.

예:

HTML :

<img src="http://cdn3.thumbs.common.smcloud.net/common/8/6/s/863444wpPN.jpg/r-0,500-n-863444wpPN.jpg" alt="malkovich" />

CSS :

img {
    padding: 1px;
    background: yellow;
    border:1px solid black;
}

테스트 (JSF 중간) :

코드 스 니펫 표시

답변

“엠보싱”에 의해 두 개의 서로 다른 색상으로 서로의 주변이 테두리를 의미하는 경우, 거기이다 outline특성 ( outline-left, outline-right…) 그러나 그것은 가난 IE 계열 (즉, IE6, 7 모두에서 지원하지 않는에서 지원됩니다 ). 두 개의 테두리가 필요한 경우 두 번째 래퍼 요소가 실제로 가장 좋습니다.

동일한 테두리에 두 가지 색상을 사용하는 것을 의미합니다. 사용 예

border-right: 1px white solid;
border-left: 1px black solid;
border-top: 1px black solid;
border-bottom: 1px white solid;

border-styles이것에 대한 특별 함도 있지만 ( ridge, outset및 inset) 내 경험상 브라우저마다 다른 경향이 있습니다.