CSS에서 경계 불투명도를 설정할 수 있습니까?
이와 같은 것으로 요소의 경계를 반투명하게 만드는 간단한 CSS 방법이 있습니까?
border-opacity: 0.7;
그렇지 않다면 이미지를 사용하지 않고 어떻게 할 수 있는지 아는 사람이 있습니까?
도 는.opacity는 전체 )를반투명으로 .소트 함를다 )게는a다게y트e를체(s는소)함(테두리를 반투명하게 만드는 가장 좋은 방법은 rgba 색상 형식입니다.예를 들어, 이렇게 하면 50% 불투명도의 빨간색 테두리가 됩니다.
div {
border: 1px solid rgba(255, 0, 0, .5);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}
rgba(IE8 이상)를 지원하지 않는 아주 오래된 브라우저의 경우 해결책은 두 개의 테두리 선언을 제공하는 것입니다.첫번째는 가짜 불투명하고, 두번째는 진짜입니다.브라우저가 사용 가능한 경우 두 번째 브라우저를 사용하고, 사용 가능하지 않은 경우 첫 번째 브라우저를 사용합니다.
div {
border: 1px solid rgb(127, 0, 0);
border: 1px solid rgba(255, 0, 0, .5);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}
첫 번째 테두리 선언은 흰색 바탕에 50% 불투명한 빨간색 테두리와 동일한 색상이 됩니다(경계 아래의 어떤 그래픽도 흐르지 않음).
추가했습니다.background-clip: padding-box;단색의 배경색을 적용하더라도 테두리가 투명하게 유지되도록 하기 위해 위의 예들을 참조합니다.
간단합니다. 오프셋이 0인 실선 그림자를 사용합니다.
#foo {
border-radius: 1px;
box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);
}
또한 요소에 테두리 반경을 설정하면 꽤 둥근 테두리가 됩니다.
다른 처럼, 는 , CSS3을 합니다.rgba(...)불투명도(알파) 값으로 테두리 색을 지정하는 구문입니다.
확인하고 싶다면 JSFiddle 데모를 간단히 소개합니다.
사파리와 크롬에서 작동합니다. (아마도 모든 웹킷 브라우저에서 작동합니다.)
파이어폭스에서 작동합니다.
IE에서 작동하는지는 의문이지만, 어떤 필터나 동작이 작동하지 않을까 생각합니다.
CSS RGBA 보더/배경 알파 더블도 있는데, 이는 보더가 사용자가 지정한 배경색(또는 배경 이미지) 위에 올려놓는 다른 문제들을 암시합니다. 따라서 많은 경우 보더 알파의 유용성을 제한합니다.
W3C validator로 CSS 코딩을 확인하면 주요 브라우저에서 작동하더라도 CSS 코드가 허용되는지 확인할 수 있습니다.
CSS를 통해 투명한 테두리를 만드는 것은, 위에 기술된 바와 같이,
border: 1px solid rgba(255, 0, 0, .5);
CSS3의 경우에도 W3C 표준에서는 허용되지 않습니다.저는 다음과 같은 CSS 코드로 직접 입력 검증기를 사용하였습니다.
.test { border: 1px solid rgba(255, 0, 0, .5); }
결과는,
Value Error : border 너무 많은 값 또는 값을 인식할 수 없습니다. 1px solid rgba(255,0,0,0.5)
유감스럽게도 알파 값("rgb" 끝에 있는 문자 "a")은 아직 테두리 색상 값의 일부로 W3C에서 인정되지 않습니다.모든 브라우저에서 작동이 되는데 왜 표준화가 안 되는지 궁금합니다.유일한 장애는 당신이 W3C 표준을 고수하고 싶은지 아니면 CSS에서 무언가를 만들기 위해 그것을 제쳐두고 싶은지입니다.
W3C 온라인 CSS validator / Direct Input을 사용합니다.
작업을 확인하기 위해 검증기를 사용하는 것이 항상 좋은 아이디어이며, 몇 시간 동안 코딩 작업을 한 후 눈을 마주쳤을 때 코딩에서 작은 오류나 심지어 큰 오류를 발견하는 데 정말 도움이 됩니다.
*이러한 상황에서 보통 하는 일이 없는 것으로 알고 있는 한, 아래에 블록을 더 큰 크기((경계*2)+원래 크기)로 만들어 투명하게 만드는 것입니다.
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
여기 예가 있습니다.
#main{
width:400px;
overflow:hidden;
position:relative;
}
.border{
width:100%;
position:absolute;
height:100%;
background-color:#F00;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.content{
margin:15px;/*size of border*/
background-color:black;
}
<div id="main">
<div class="border">
</div>
<div class="content">
testing
</div>
</div>
업데이트:
이 질문은 8년 이상 지난 질문이기 때문에 이 답변은 구식입니다.오늘날 모든 최신 브라우저는 rgba, 박스 쉐도우 등을 지원합니다.그러나 이것은 8년 이상 전의 상황을 보여주는 좋은 예입니다.
경우에 따라 작동할 수 있는 대체 솔루션으로 다음을 변경합니다.border-styledotted.
전경색과 배경색 사이에 픽셀 그룹이 번갈아 있는 것은 부분적으로 투명한 픽셀의 연속선과 같지 않습니다.반면에 CSS는 훨씬 덜 필요하고 브라우저별 지시 없이 모든 브라우저에서 훨씬 더 호환됩니다.
다른 답변들은 경계 불투명성 문제의 기술적인 측면을 다루지만, 해킹(순수 CSS 및 HTML만 해당)을 제시하고자 합니다.기본적으로 컨테이너 디브를 만들고, 경계 디브와 콘텐츠 디브를 갖습니다.
<div class="container">
<div class="border-box"></div>
<div class="content-box"></div>
</div>
그런 다음 CSS:(콘텐츠 테두리를 없음으로 설정하고, 테두리 두께가 고려되도록 포지셔닝 처리)
.container {
width: 20vw;
height: 20vw;
position: relative;
}
.border-box {
width: 100%;
height: 100%;
border: 5px solid black;
position: absolute;
opacity: 0.5;
}
.content-box {
width: 100%;
height: 100%;
border: none;
background: green;
top: 5px;
left: 5px;
position: absolute;
}
해 볼 수 있습니다.dashed,dotted부분적으로 완전히 투명하게 경계를 설정합니다.
body {
background: url('http://i.imgur.com/pr86mh.jpg');
}
#foo {
border: 5px dashed #b00;
background: #ddd;
background-clip: padding-box;
padding: 8px;
width: 100px;
margin: 30px;
}<p id=foo>some content</p>여기서 상자 밖에서 조금 생각하기: SVG 기본 모양으로 작업하는 경우 다음의 조합을 사용할 수 있습니다.stroke,stroke-width(보조금 지원 > 97%) 및stroke-opacity(브라우저 지원 > 99%). OP가 요청하는 것과 본질적으로 동일한 작업을 수행합니다.
예를 들어, 이 선언은 다음과 같습니다.
circle {
stroke: blue;
stroke-width: 5px;
stroke-opacity: 0.4
}
주변에 반투명한 파란색 헤일로를 추가할 것입니다<circle>와 함께#000채우다.
이 JSFiddle은 여러 SVG 기본 형상에 대한 데모를 제공합니다.그 바이올린은 빨간색을 사용합니다.fill푸른색의stroke사이의 주요한 차이를 강조합니다.stroke그리고.border- 절반의stroke-width기본 형태의 둘레 안쪽에 있습니다.
이것은 CSS로는 달성할 수 없는 "이중 테두리" 모양(외부에서 각 기본 모양의 중앙을 향해: blue->(파란색 + 빨간색 = 보라색)->빨간색)을 제공합니다.border외로이border+outline could - 위의 JSFiddle을 참조하여 예를 들어 a를 사용할 수 있습니다.<div>), 및 (방사형 기본 형상의 경우) a로 달성하기 어렵습니다.radial-gradient().
시도해 보십시오.
<h2>Snippet for making borders transparent</h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
Mauris massa. Vestibulum lacinia arcu eget nulla. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim
lacinia nunc. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor.
<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod
in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis
turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. <b>Nam nec ante</b>. Suspendisse in justo eu magna luctus suscipit. Sed lectus. <i>Sed convallis tristique sem</i>.
Integer euismod lacus luctus magna. <b>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</b>. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. <b>Suspendisse in justo eu magna luctus suscipit</b>. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. </p>
</div>
<div id="transparentBorder">
This <div> has transparent borders.
</div>
그리고 우리의 마법의 CSS가..
* {
padding: 10pt;
font: 13px/1.5 Helvetica Neue, Arial, Helvetica, 'Liberation Sans', FreeSans, sans-serif;
}
b {
font-weight: bold;
}
i {
font-style: oblique;
}
H2 {
font-size: 2em;
}
div[id='transparentBorder'] {
height: 100px;
width: 200px;
padding: 10px;
position: absolute;
top: 40%;
left: 30%;
text-align: center;
background: Black;
border-radius: 4px;
border: 10pt solid rgba(0, 0, 0, 0.5);
-moz-background-clip: border;
/* Firefox 3.6 */
-webkit-background-clip: border;
/* Safari 4? Chrome 6? */
background-clip: border-box;
/* Firefox 4, Safari 5, Opera 10, IE 9 */
-moz-background-clip: padding;
/* Firefox 3.6 */
-webkit-background-clip: padding;
/* Safari 4? Chrome 6? */
background-clip: padding-box;
/* Firefox 4, Safari 5, Opera 10, IE 9 */
text-align: center;
margin: 0;
color: #fff;
cursor: pointer;
}
여기 데모를 확인해 보세요.
이 답변이 구글 결과 1위이기 때문에 저와 같은 신인들을 위해 업데이트된 (2021년) 답변을 올리기로 결정했습니다.
rgba 색상을 사용하여 경계 불투명도 구매를 설정할 수 있습니다.
border:2px solid rgba(232, 69, 69,.5); /* notice the .5 */
여기에서 fiddle 예제 참조 - http://jsfiddle.net/joshdane/74pybasm/33/
사용하실 수 있고, 즐기실 수 있습니다.
구형 브라우저는 rgba를 지원하지 않는다는 논의가 있지만 대부분의 사람들은 구형 브라우저를 더 이상 사용하지 않습니다.만약 여러분이 막 배우는 중이라면, 오래된 브라우저를 지원하는 것에 대해 걱정하지 마세요.
언급URL : https://stackoverflow.com/questions/4062001/can-you-set-a-border-opacity-in-css
'programing' 카테고리의 다른 글
| VBA Excel 중단점 및 중지가 작동하지 않습니다. (0) | 2023.09.07 |
|---|---|
| 각진 재료 - 비활성화된 버튼에 툴팁을 추가하는 방법 (0) | 2023.09.07 |
| Oracle 11g: 여러 열을 피벗 해제하고 열 이름 포함 (0) | 2023.09.07 |
| .net 템플릿 엔진을 추천해주시겠습니까? (0) | 2023.09.07 |
| jQuery를 사용하여 드롭다운 목록을 열 수 있습니까? (0) | 2023.09.07 |