2010-03-24 4 views

답변

82

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

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

+3

글쎄 그것은 ie8, 모질라, 오페라, 크롬에서 잘 작동했지만, 사파리에서 시도하지는 않았지만 사파리는별로 신경 쓰지 않는다. 고마워요! –

+4

그래, 특히 IE6이 작동하지 않습니다. IE7은 괜찮습니다. – bobince

+0

덕분에 많이 먹었습니다. –

29

당신은 국경을 제거하고 패딩 증가시킬 수있다 :

li{ 
 
     display:inline-block; 
 
     padding:6px; 
 
     border-width:0px; 
 
    } 
 
    li:hover{ 
 
     border:1px solid #FC0; 
 
     padding:5px; 
 
    }
<ul> 
 
    <li>Hovering is great</li> 
 
</ul>

+0

글쎄, 마치 매력처럼 작동했는데, 어떻게해야하는지 명확한 방법이 있는지 궁금해했다. 보이지 않는 국경을 갖는 것이 가능하다면? 제안에 다시 한 번 감사드립니다. –

+3

내게 맞는 솔루션처럼 들리네 – NibblyPig

+0

코드가 필요한 방식과 반대 방향으로 작동한다는 것을 깨달았습니다! 결정된. 또한, 나는 투명한 색으로 갈 것입니다. 나는 그것에 대해 몰랐다 : D –

3

네를, 당신은 border: 1px solid transparent

또 다른 해결책은 호버에 outline를 사용하는 것입니다 사용할 수 있습니다 (그리고 경계를 0으로 설정한다.) doesn 문서 흐름에 영향을 미치지 않음 :

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

NB. 윤곽선은 개별면이 아닌 sharthand 속성으로 만 설정할 수 있습니다. 그것은 단지 디버깅을 위해 사용하기위한 것이지만 잘 작동합니다.

+0

고마워요! 더 좋은 옵션이 더 많습니다 –

3

댓글에서 더 많은 옵션을 선택할수록 더 좋았고, 다음은 또 다른 의견입니다.

CSS3에는 두 가지 다른 "상자 모델"이 있습니다. 하나는 경계 요소와 패딩을 블록 요소의 너비에 추가하는 반면 다른 요소는 그렇지 않습니다. 후자를 지정할 수 있습니다.

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

그런 다음 최신 브라우저에서 요소의 너비는 항상 동일합니다. 즉, 마우스를 올렸을 때 테두리를 적용하면 테두리의 너비가 요소의 전체 너비에 추가되지 않습니다. 테두리는 요소의 "내부"에 추가됩니다. 그러나 올바르게 기억한다면 width을 명시 적으로 지정해야 작동 할 수 있습니다. 이 특별한 경우에는 아마도 어떤 옵션이 아니 겠지만, 미래 상황을 염두에두면됩니다.

+0

투명 테두리의 유스 케이스 일 수 있습니다. 호버에 테두리를 적용하는 대신 투명 색상에서 볼 수있는 색상으로 색상을 변경하십시오. – DaveWalley

2

This blog entry에는 IE6에서 border-color: transparent을 에뮬레이션하는 방법이 있습니다.

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

하면 IE6 수정에 사용되는 border-color.testDiv 요소에 임의의 장소에서 사용되지 않았는지 확인 : 아래의 예는 블로그 항목의 주석에서 제기 된 "hasLayout의"수정이 포함되어 있습니다. 예를 pink에서 #FEFEFE으로 변경 했으므로 사용하기가 어려워 보입니다.

10

이봐이 내가 ..이 CSS3에게 있습니다

사용하여 DIV에 대한 속성 또는 어디서나 넣고 싶어 국경 trasparent 다음

예를 들어, 경험이 최선의 해결책이다

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

이것은 작동합니다.

27

많은 사람들이 투명한 경계 대신에 불투명 한 경계에 대한 해결책을 찾기 위해 여기에 착륙해야합니다. 이 경우 rgba을 사용할 수 있습니다. aalpha을 나타냅니다.

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

Demo

당신은 단순히 완전한 투명 국경을 원하는 경우에, 당신은 0-1


에서 borderopacity을 변경할 수 있습니다, 사용하는 가장 좋은 방법은 border: 1px solid transparent;처럼 transparent입니다

+0

그리고이 도구를 사용하여 16 진수를 rgba 색상으로 변환 할 수 있습니다 ... http://www.hexcolortool.com ... 선택적으로 URL에 16 진수를 지정할 수 있습니다. http : //www.hexcolortool.com/#ffcc00 – clayRay

0

가장 쉬운 해결책은 t o rgba을 색상으로 사용하십시오 : border-color: rgba(0,0,0,0); 완전히 투명 한 경계 색상입니다.