CSS에서 테두리 불투명도를 설정할 수 있습니까?

이와 같은 요소로 요소의 테두리를 반투명하게 만드는 CSS 방법이 있습니까?

border-opacity: 0.7;

그렇지 않다면 누구나 이미지를 사용하지 않고 어떻게 할 수 있는지 알고 있습니까?

불행히도 opacity요소는 전체 요소 (텍스트 포함)를 반투명하게 만듭니다. 테두리를 반투명하게 만드는 가장 좋은 방법은 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형식을 이해하지 못하며 이것이 전체 선언 인 경우 테두리를 전혀 표시하지 않는다는 것입니다. 해결책은 두 가지 테두리 선언을 제공하는 것입니다. 첫 번째는 가짜 불투명하고 두 번째는 실제입니다. 브라우저가 가능하면 두 번째 브라우저를 사용하고 그렇지 않은 경우 첫 번째 브라우저를 사용합니다.

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;"를 추가했습니다. 이 답변에 (댓글에서 SooDesuNe의 제안에 따라) 단색 배경색을 적용하더라도 테두리가 투명하게 유지됩니다.

오프셋이 0 인 단색 그림자를 사용하면 쉽습니다.

#foo {
  border-radius: 1px;
  box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);       
}

또한 요소에 테두리 반경을 설정하면 둥근 테두리가 생깁니다.

jsFiddle 데모

다른 사람들이 언급했듯이 : CSS-3은 rgba(...)구문을 사용하여 불투명도 (알파) 값으로 테두리 색상을 지정할 수 있다고 말합니다 .

확인하고 싶은 경우에 간단한 예가 있습니다.

• Safari 및 Chrome에서 작동합니다 (아마도 모든 웹킷 브라우저에서 작동 함).

• Firefox에서 작동합니다

• IE에서 전혀 작동하지 않는다고 생각하지만 작동시킬 필터 또는 동작이 있다고 생각합니다.

이 stackoverflow post 도 있습니다. 이것은 다른 문제를 제안합니다. 즉, 테두리가 지정한 배경색 (또는 배경 이미지)을 맨 위에 렌더링합니다. 따라서 많은 경우 테두리 알파의 유용성을 제한합니다.

W3C 유효성 검사기를 사용하여 CSS 코딩을 확인하면 주요 브라우저에서 작동하더라도 CSS 코드가 적합한 지 확인할 수 있습니다.

위에서 작성된 CSS를 통해 투명한 테두리 만들기

border: 1px solid rgba(255, 0, 0, .5);

CSS3조차도 W3C 표준에서 허용되지 않습니다. 직접 입력 유효성 검사기를 다음 CSS 코드와 함께 사용했습니다.

.test { border: 1px solid rgba(255, 0, 0, .5); }

결과는

값 오류 : 테두리 너무 많은 값 또는 값이 인식되지 않습니다 : 1px solid rgba (255,0,0,0.5)

안타깝게도 W3C에서는 알파 값 ( "rgb"끝에있는 문자 "a")을 테두리 색 값의 일부로 받아 들일 수 없습니다. 모든 브라우저에서 작동하기 때문에 왜 표준화되지 않았는지 궁금합니다. 유일한 단점은 W3C 표준을 고수할지 아니면 CSS에서 무언가를 만들기 위해 비켜 놓을 것인지입니다.

쓰다 W3C 온라인 CSS 유효성 검사기 / 직접 입력 .

유효성 검사기를 사용하여 작업을 확인하는 것이 좋습니다. 코딩 작업 후 여러 시간 동안 교차 작업을 수행 할 때 코딩에서 작거나 큰 오류를 찾는 데 도움이됩니다.

* 내가 아는 한 이런 종류의 상황에서 내가 일반적으로하는 일이 없다는 것은 더 큰 크기 ((테두리 크기 * 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-style에 dotted.

전경색과 배경색 사이에 교대로 픽셀 그룹이있는 것은 부분적으로 투명한 픽셀의 연속적인 선과 동일하지 않습니다. 반면에 CSS는 훨씬 적게 필요하며 브라우저 별 지시문이 없어도 모든 브라우저에서 훨씬 더 호환됩니다.

다른 답변은 국경 불투명도 문제의 기술적 측면을 다루는 반면 해킹을 제시하고 싶습니다 (순수한 CSS 및 HTML 만 해당). 기본적으로 테두리 div와 내용 div가있는 컨테이너 div를 만듭니다.

<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;
}

아니요, CSS로 테두리의 불투명도 만 설정할 수 는 없습니다 .

예를 들어, 색상을 모르는 경우을 사용하여 테두리의 불투명도 만 변경할 수있는 방법이 없습니다 rgba().

이 시도:

<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 &lt;div&gt; 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;
}

여기서 데모를 확인 하십시오.