클라이언트는 양각 된 모양을 위해 두 가지 색상 테두리를 원합니다. 한 요소에서이 작업을 수행 할 수 있습니까? 개별 테두리가있는 두 개의 DOM 요소를 쌓는 것을 피하고 싶었습니다.
답변:
예 : outline속성을 사용하십시오 . 국경 밖에서 두 번째 경계 역할을합니다. 마진, 패딩 및 드롭 섀도우와 함께 불안정한 방식으로 상호 작용할 수 있습니다. 일부 브라우저에서는 브라우저 별 접두사를 사용해야 할 수도 있습니다. 그것이 그것을 선택하는지 확인하기 위해 : -webkit-outline등 (특히 WebKit은 이것을 필요로하지 않지만).
이것은 특정 브라우저의 윤곽선을 제거하려는 경우에도 유용 할 수 있습니다 (예 : 윤곽선을 그림자와 결합하려는 경우, WebKit에서는 윤곽선이 그림자 내부에 있고, FireFox에서는 외부에서 -moz-outline: 0아름다운 CSS 그림자 주위에 선이 나쁘지 않도록하는 데 유용합니다.)
.someclass {
border: 1px solid blue;
outline: 1px solid darkblue;
}
편집 : 어떤 사람들은 outlineIE <8과 잘 어울리지 않는다고 말했습니다 . 이것은 사실입니다. IE <8을 지원하는 것은 실제로해야 할 일이 아닙니다.
outlineCSS2 이후로 존재했습니다.
이것은 매우 가능합니다. 약간의 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>그게 당신이 찾고있는 것입니까?
border-radius안쪽 테두리의 반경을 1 픽셀 줄이면 두 개의 둥근 테두리 사이의 간격이 거의 눈에 띄지 않게됩니다.
bottom:1px하는 대신 사용 height:100%:)
또 다른 방법은 다음을 사용하는 것입니다 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) 내 경험상 브라우저마다 다른 경향이 있습니다.
border : black white; 같은 시간에 순차적으로 보이는 하나의 테두리에 대해 두 가지 다른 색상을 정의하는 것과 같은 것이라고 생각합니다 .
outline있지만 IE <8
불가능하지만 , 또는 다른 border-style값 이 원하는 효과를 얻었는지 확인해야합니다 . ( 나는 의심 스럽지만 .. )insetoutset
CSS3에는 테두리 이미지 속성이 있지만 아직 브라우저의 지원에 대해 알지 못합니다 (자세한 내용은 http://www.css3.info/preview/border-image/ ) ..
간단히 쓰기
style="border:medium double;"
html 태그의 경우
당신은 사용할 수 있습니다
<html>
<head>
<title>Two Colors</title>
<style type="text/css">
.two-colors {
background: none repeat scroll 0% 0% rgb(245, 245, 245); border-color: rgba(111,111,111,0.2) transparent;
padding: 4px; outline: 1px solid green;
}
</style>
<style type="text/css">
body {
padding-top: 20px;
padding-bottom: 40px;
background-color:yellow;
}
</style>
</head>
<body>
<a target="_blank" href="people.htm">
<img class="two-colors" src="people.jpg" alt="Klematis" width="213" height="120" />
</a>
</body>
</html>