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 속성으로 만 설정할 수 있습니다. 디버깅 용으로 만 사용되지만 잘 작동합니다.

---

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

In CSS3, there are two different so-called "box models". One adds the border and padding to the width of a block element, while the other does not. You can use the latter by specifying

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

Then, in modern browsers, the element will always have the same width. I.e., if you apply a border to it on hover, the width of the border will not add to the overall width of the element; the border will be added "inside" the element, so to speak. However, if I remember correctly, you must specify the width explicitly for this to work. Which is probably not an option for you in this particular case, but you can keep it in mind for future situations.

---

This blog entry has a way to emulate border-color: transparent in IE6. The below example includes the "hasLayout" fix that is brought up in the blog entry comments:

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

Make sure that the border-color used in the IE6 fix is not used anywhere in the .testDiv element. I changed the example from pink to #FEFEFE because that seems even less likely to be used.

---

The easiest solution to this is to use rgba as the color: border-color: rgba(0,0,0,0); That is fully transparent border color.

---

Use transparent property

border-color : transparent;

참고URL : https://stackoverflow.com/questions/2506844/how-do-i-make-a-transparent-border-with-css