Hướng dẫn how do you make a border invisible in css? - Làm cách nào để ẩn đường viền trong css?

Tôi đang cố gắng làm một chiếc Navbar như một bài tập.

Tôi đang sử dụng a:hover để bao gồm một đường viền vững chắc xung quanh nút được bay lơ lửng. Tuy nhiên, điều này làm cho tất cả các nút khác di chuyển theo kích thước của đường viền.

Bản sửa lỗi thích hợp cho vấn đề này là gì? Tôi biết có những người khác (thảo luận ở đây), tôi đặc biệt cố gắng làm cho biên giới "được vô hình nhưng chiếm không gian ngay cả khi không bay lượn". Tôi đặt border:transparent hy vọng nó có thể làm những gì tôi muốn, nhưng nó không thể hiện không gian.

Tôi biết tôi có thể chọn màu của đường viền bằng nền và làm cho nó vững chắc, nhưng đây không phải là điều tôi muốn. Có cách nào để giải quyết vấn đề này không?

Hỏi ngày 26 tháng 4 năm 2011 lúc 12:51Apr 26, 2011 at 12:51

ripper234ripper234ripper234

217K268 Huy hiệu vàng623 Huy hiệu bạc898 Huy hiệu Đồng268 gold badges623 silver badges898 bronze badges

0

Làm thế nào về border: 10px solid transparent?

Đã trả lời ngày 26 tháng 4 năm 2011 lúc 13:14Apr 26, 2011 at 13:14

1

Tùy chọn tốt nhất của bạn là thêm phần đệm hoặc lề vào phần tử của bạn có cùng kích thước với đường viền và làm cho đường viền có chiều rộng bằng không, sau đó hiển thị đường viền và tháo phần đệm bằng bộ chọn a:hover.

Đây là một mẫu. Bạn thường có thể làm điều này với tỷ suất lợi nhuận quá.

a {
    display: inline-block;
    height: 2em; width: 100px;
    padding: 2px;
    background: #0ff;
}

a:hover {
    padding: 0;
    border :2px solid #000;
}

Hello World

Đã trả lời ngày 26 tháng 4 năm 2011 lúc 12:53Apr 26, 2011 at 12:53

Derekerdmannderekerdmannderekerdmann

17.4K10 Huy hiệu vàng75 Huy hiệu bạc109 Huy hiệu đồng10 gold badges75 silver badges109 bronze badges

2

Một lý do khiến điều này không hoạt động như bạn mong đợi là vì bạn chỉ áp dụng display:block trên :hover, nó cần được áp dụng cho phần tử mà không có bộ chọn: Hover hoặc bạn sẽ nhận được kích thước "thay đổi". Không quan trọng bạn sử dụng loại hiển thị nào, bạn chỉ cần đảm bảo chúng giống nhau và theo mặc định, ____10 là nội tuyến.

Một lý do khác có liên quan đến Biên giới tốc ký của bạn, bạn cần thêm loại viền cho phiên bản trong suốt như

Hello World

1 thay vì

Hello World

2.

Kỹ thuật bạn đang sử dụng là hoàn toàn hợp pháp, không cần phải hack hoặc phác thảo (không thêm kích thước).

http://jsfiddle.net/Madmartigan/kwdDB/

Thử cái này:

#wd-navbar li a {
     border: medium solid transparent;
     display: block;
     margin: 1px;
}

#wd-navbar li a:hover {
     background-color: #F5DEB3;
     border: medium solid;
}

Đã trả lời ngày 26 tháng 4 năm 2011 lúc 13:01Apr 26, 2011 at 13:01

Wesley Murchwesley MurchWesley Murch

99.5K36 Huy hiệu vàng192 Huy hiệu bạc226 Huy hiệu Đồng36 gold badges192 silver badges226 bronze badges

border:transparent có nghĩa là

Hello World

4

Nếu bạn không chỉ định thuộc tính khi sử dụng cú pháp tốc ký thì bạn đặt lại tất cả các thuộc tính theo mặc định của chúng.

Bạn cần phải cung cấp cho nó một kiểu biên giới và chiều rộng biên giới.

Đã trả lời ngày 26 tháng 4 năm 2011 lúc 12:57Apr 26, 2011 at 12:57

QuentinentinQuentin

883K121 Huy hiệu vàng1180 Huy hiệu bạc1297 Huy hiệu đồng121 gold badges1180 silver badges1297 bronze badges

Bạn có thể sử dụng thuộc tính

Hello World

5 CSS thay vì biên giới của bạn, hoạt động giống như một biên giới nhưng không được tính đến trong các tính toán kích thước.

Tuy nhiên, điều này có một số vấn đề, không được IES 7 trở lên hỗ trợ.

Đã trả lời ngày 26 tháng 4 năm 2011 lúc 12:55Apr 26, 2011 at 12:55

GarethgarethGareth

128K36 Huy hiệu vàng147 Huy hiệu bạc155 Huy hiệu Đồng36 gold badges147 silver badges155 bronze badges

Thiết lập màu sắc biên giới: trong suốt; Làm công việc.

a {
  border-color : transparent ;
}

a:hover {
   border-color : black;
}

Đã trả lời ngày 14 tháng 6 năm 2016 lúc 17:19Jun 14, 2016 at 17:19

user2647710user2647710user2647710

331 Huy hiệu vàng1 Huy hiệu bạc6 Huy hiệu đồng1 gold badge1 silver badge6 bronze badges

Sử dụng các yếu tố giả

Hello World

6 và

Hello World

7 để ceate ranh giới vô hình.

Đã trả lời ngày 2 tháng 9 năm 2016 lúc 5:43Sep 2, 2016 at 5:43

abhitabhitabhit

9733 Huy hiệu vàng17 Huy hiệu bạc40 Huy hiệu đồng3 gold badges17 silver badges40 bronze badges

Xin lưu ý rằng đường viền trong suốt chỉ hữu ích khi bạn không có bất kỳ hình ảnh hộp nào trên phần tử. Hãy xem hình ảnh:

Đã trả lời ngày 27 tháng 8 năm 2021 lúc 10:10Aug 27, 2021 at 10:10