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

tôi có một li 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đường viền xuất hiện mà không làm lithay đổi xung quanh. Có thể có 'đường viền' không nhìn thấy được không?

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

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

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

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

Bản giới thiệu

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

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

Bạn có thể xóa đường viền và tăng phần đệm:

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

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

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

Này, đây là giải pháp tốt nhất mà tôi từng trải nghiệm .. đây là CSS3

sử dụng thuộc tính sau cho div của bạn hoặc bất kỳ nơi nào bạn muốn đặt dấu trasparent đường viền

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 ..

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

Một giải pháp khác là sử dụng outlinekhi di chuột (và đặt đường viền thành 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 dưới dạng thuộc tính sharthand, không cho các mặt riêng lẻ. Nó chỉ được sử dụng để gỡ lỗi nhưng nó hoạt động tốt.

Vì bạn đã nói trong một 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 phần 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 phần tử kia thì không. Bạn có thể sử dụng cái 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 các 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ử; đường viền sẽ được thêm vào "bên trong" phần tử, có thể nói như vậy. Tuy nhiên, nếu tôi nhớ không lầm, bạn phải chỉ định widthrõ ràng để điều này hoạt động. Có thể đây không phải là một lựa chọn dành 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 sau này.

Mục nhập blog này có một cách để mô phỏng border-color: transparenttrong IE6. Ví dụ dưới đây bao gồm bản sửa lỗi "hasLayout" được hiển thị trong các nhận xét về mục nhập blog:

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

Đảm bảo rằng bản border-colorsửa lỗi được sử dụng trong IE6 không được sử dụng ở bất kỳ đâu trong .testDivphần tử. Tôi đã thay đổi ví dụ từ pinkthành #FEFEFEvì điều đó dường như thậm chí còn ít được sử dụng hơn.

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

Sử dụng tài sản minh bạch

border-color : transparent;