두 가지 색상 테두리
클라이언트는 양각 된 모양을 위해 두 가지 색상 테두리를 원합니다. 한 요소에서이 작업을 수행 할 수 있습니까? 개별 테두리가있는 두 개의 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 class="border">
Hi I have two border colors<br />
I am also Fluid
</div>
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;
}
그게 당신이 찾고있는 것입니까?
또 다른 방법은 다음을 사용하는 것입니다 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;
}
테스트 (JSFiddle) : http://jsfiddle.net/68gb7/
If by "embossing" you mean two borders around each other with two different colours, there is the outline property (outline-left, outline-right....) but it is poorly supported in the IE family (namely, IE6 and 7 don't support it at all). If you need two borders, a second wrapper element would indeed be best.
If you mean using two colours in the same border. Use e.g.
border-right: 1px white solid;
border-left: 1px black solid;
border-top: 1px black solid;
border-bottom: 1px white solid;
there are special border-styles for this as well (ridge, outset and inset) but they tend to vary across browsers in my experience.
Not possible, but you should check to see if border-style values like inset, outset or some other, accomplished the effect you want.. (i doubt it though..)
CSS3 has the border-image properties, but i do not know about support from browsers yet (more info at http://www.css3.info/preview/border-image/)..
Simply write
style="border:medium double;"
for the html tag
You could use
<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>
This produces a nice effect.
<div style="border: 1px solid gray; padding: 1px">
<div style="border: 1px solid gray">
internal stuff
</div>
</div>
참고URL : https://stackoverflow.com/questions/3906983/two-color-borders
'programing' 카테고리의 다른 글
| Java에서 Excel 시트를 읽는 데 더 나은 API는 무엇입니까-JXL 또는 Apache POI (0) | 2020.09.02 |
|---|---|
| SQL Server 백업 또는 복원 프로세스의 진행률을 확인하는 데 사용할 수있는 SQL 스크립트가 있습니까? (0) | 2020.09.02 |
| Python 2.7 : 파일로 인쇄 (0) | 2020.09.02 |
| jquery로 div에서 스타일 속성 추가 및 제거 (0) | 2020.09.02 |
| C auto 키워드는 어디에 사용됩니까? (0) | 2020.09.02 |