[css] CSS로 투명한 테두리를 만들려면 어떻게합니까?

나는 한 li다음 스타일 :

li{
    display:inline-block;
    padding:5px;
    border:1px solid none;
}
li:hover{
    border:1px solid #FC0;
}

li테두리 위로 마우스를 가져 가면 li의 이동 이 발생하지 않고 나타납니다 . 보이지 않는 ‘테두리’를 가질 수 있습니까?

답변

“투명”을 색상으로 사용할 수 있습니다. IE의 일부 버전에서는 검은 색으로 표시되지만 IE6 일 이후로 테스트하지 않았습니다.

http://www.researchkitchen.de/blog/archives/css-bordercolor-transparent.php

답변

투명 테두리 대신 불투명 테두리에 대한 해결책을 찾기 위해 많은 분들이 여기에 착륙해야합니다. 당신이 사용할 수있는 경우 rgba, a을 의미합니다 alpha.

.your_class {
    height: 100px;
    width: 100px;
    margin: 100px;
    border: 10px solid rgba(255,255,255,.5);
}

데모

여기에서, 당신은 변경할 수 opacity의를 border에서0-1

완전한 투명 테두리를 원할 경우 사용하는 가장 좋은 방법은 다음 transparent과 같습니다.border: 1px solid transparent;

답변

테두리를 제거하고 패딩을 늘릴 수 있습니다.

li {
  display: inline-block;
  padding: 6px;
  border-width: 0px;
}

li:hover {
  border: 1px solid #FC0;
  padding: 5px;
}

<ul>
  <li>Hovering is great</li>
</ul>

스 니펫 확장

답변

이건 제가 경험 한 최고의 솔루션입니다. 이건 CSS3입니다

다음 속성을 div 또는 테두리를 투명하게 표시하려는 모든 곳에 사용하십시오.

예 :

div_class {
 border: 10px solid #999;
 background-clip: padding-box; /* Firefox 4+, Opera, for IE9+, Chrome */
}

작동합니다 ..

답변

네, 사용할 수 있습니다 border: 1px solid transparent

또 다른 해결책은 outline문서 흐름에 영향을주지 않는 마우스 오버시 (그리고 테두리를 0으로 설정) 사용하는 것입니다.

li{
    display:inline-block;
    padding:5px;
    border:0;
}
li:hover{
    outline:1px solid #FC0;
}

NB. 윤곽선은 개별 측면이 아닌 sharthand 속성으로 만 설정할 수 있습니다. 디버깅 용으로 만 사용되지만 잘 작동합니다.

답변

옵션이 많을수록 더 좋다고 의견에 말 했으므로 여기에 또 다른 옵션이 있습니다.

CSS3에는 소위 “박스 모델”이라는 두 가지가 있습니다. 하나는 블록 요소의 너비에 테두리와 패딩을 추가하고 다른 하나는 추가하지 않습니다. 후자를 지정하여 사용할 수 있습니다.

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

그러면 최신 브라우저에서 요소의 너비는 항상 동일합니다. 즉, 마우스 오버시 테두리를 적용하면 테두리 너비가 요소의 전체 너비에 추가되지 않습니다. 테두리는 말하자면 요소의 “내부”에 추가됩니다. 그러나 내가 올바르게 기억한다면 width이것이 작동 하도록 명시 적으로 지정해야합니다 . 이 특정 경우에는 옵션이 아닐 수 있지만 향후 상황에 대비하여 염두에 둘 수 있습니다.

답변

이 블로그 항목 에는 border-color: transparentIE6 에서 에뮬레이트하는 방법이 있습니다. 아래 예제에는 블로그 항목 댓글에서 가져온 “hasLayout”수정 사항이 포함되어 있습니다.

/* transparent border */
.testDiv {
    width: 200px;
    height: 200px;
    border: solid 10px transparent;
}
/* IE6 fix */
*html .testDiv {
    zoom: 1;
    border-color: #FEFEFE;
    filter: chroma(color=#FEFEFE);
}

있는지 확인 border-colorIE6 수정에 사용이 어디에서나 사용되지 않는 .testDiv요소입니다. 사용 가능성이 훨씬 적기 때문에 예제를에서 pink로 변경했습니다 #FEFEFE.