클라이언트는 양각 된 모양을 위해 두 가지 색상 테두리를 원합니다. 한 요소에서이 작업을 수행 할 수 있습니까? 개별 테두리가있는 두 개의 DOM 요소를 쌓는 것을 피하고 싶었습니다.
답변
예 : outline
속성을 사용하십시오 . 국경 밖에서 두 번째 경계 역할을합니다. 마진, 패딩 및 드롭 섀도우와 함께 불안정한 방식으로 상호 작용할 수 있습니다. 일부 브라우저에서는 브라우저 별 접두사를 사용해야 할 수도 있습니다. 그것이 그것을 선택하는지 확인하기 위해 : -webkit-outline
등 (특히 WebKit은 이것을 필요로하지 않지만).
이것은 특정 브라우저의 윤곽선을 제거하려는 경우에도 유용 할 수 있습니다 (예 : 윤곽선을 그림자와 결합하려는 경우, WebKit에서는 윤곽선이 그림자 내부에 있고, FireFox에서는 외부에서 -moz-outline: 0
아름다운 CSS 그림자 주위에 선이 나쁘지 않도록하는 데 유용합니다.)
.someclass {
border: 1px solid blue;
outline: 1px solid darkblue;
}
편집 : 어떤 사람들은 outline
IE <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
) 내 경험상 브라우저마다 다른 경향이 있습니다.