Làm cách nào để tạo đường viền trong suốt với CSS?

Question

Tôi có một li theo kiểu như sau:

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

Khi tôi di chuột qua li biên giới xuất hiện mà không làm thay đổi các 's li xung quanh. Có thể có một 'biên giới' không nhìn thấy được không?

Answer 1

Bạn có thể sử dụng "trong suốt" làm màu. Trong một số phiên bản của IE, xuất hiện như màu đen, nhưng tôi đã không thử nghiệm nó ra kể từ ngày IE6.

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

Answer 2

Bạn có thể loại bỏ biên giới và tăng padding:

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

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

Answer 3

Yep, bạn có thể sử dụng border: 1px solid transparent

Một giải pháp khác là sử dụng outline trên di chuột (và đặt đường viền là 0) không ảnh hưởng đến luồng tài liệu:

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

NB. Bạn chỉ có thể đặt đường viền làm tài sản lầu, chứ không phải cho các mặt riêng lẻ. Nó chỉ có nghĩa là được sử dụng để gỡ lỗi nhưng nó hoạt động độc đáo.

Answer 4

Vì bạn đã nói trong nhận xét rằng bạn càng có nhiều tùy chọn thì càng tốt, đây là một tùy chọn khác.

Trong CSS3, có hai cái gọi là "mô hình hộp" khác nhau. Một cái thêm đường viền và phần đệm vào chiều rộng của một phần tử khối, trong khi cái kia thì không. Bạn có thể sử dụng sau bằng cách chỉ định

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

Sau đó, trong trình duyệt hiện đại, phần tử sẽ luôn có cùng chiều rộng. Tức là, nếu bạn áp dụng đường viền cho nó khi di chuột, chiều rộng của đường viền sẽ không thêm vào chiều rộng tổng thể của phần tử; biên giới sẽ được thêm vào "bên trong" phần tử, để nói. Tuy nhiên, nếu tôi nhớ chính xác, bạn phải chỉ định rõ ràng width để tính năng này hoạt động. Mà có lẽ không phải là một lựa chọn cho bạn trong trường hợp cụ thể này, nhưng bạn có thể ghi nhớ nó cho các tình huống trong tương lai.

Answer 5

This blog entry có cách để mô phỏng border-color: transparent trong IE6. Ví dụ dưới đây bao gồm các "hasLayout" sửa chữa đó được đưa lên trong các ý kiến ​​blog entry:

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

Hãy chắc chắn rằng border-color được sử dụng trong việc sửa chữa IE6 không được sử dụng bất cứ nơi nào trong thành phần .testDiv. Tôi đã thay đổi ví dụ từ pink thành #FEFEFE vì điều đó dường như ít có khả năng được sử dụng hơn.

Answer 6

hey đây là giải pháp tốt nhất mà tôi từng có kinh nghiệm .. đây là CSS3

sử dụng sau tài sản để div của bạn hoặc trasparent biên giới bất cứ nơi nào bạn muốn đặt

ví dụ

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

điều này sẽ hoạt động ..

Answer 7

Nhiều người trong số các bạn phải hạ cánh tại đây để tìm giải pháp cho đường viền mờ thay vì đường viền trong suốt. Trong trường hợp đó, bạn có thể sử dụng rgba, trong đó a là viết tắt của alpha.

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

Demo

Ở đây, bạn có thể thay đổi opacity của border từ 0-1

---

Nếu bạn chỉ đơn giản là muốn có một đường viền hoàn chỉnh minh bạch, điều tốt nhất để sử dụng là transparent, như border: 1px solid transparent;

Answer 8

Giải pháp dễ nhất cho điều này là t o sử dụng rgba làm màu: border-color: rgba(0,0,0,0); Màu đường viền hoàn toàn trong suốt.