Câu hỏi Đường viền đôi CSS có viền ngoài dày hơn đường viền bên trong


Trong công việc hiện tại của tôi, tôi bắt buộc phải tạo một đường viền đôi trên một container. Kiểu đường viền: gấp đôi; đạt được điều này, tuy nhiên khách hàng của tôi muốn đường viền bên ngoài dày hơn và đường viền bên trong có độ dày bình thường.

Khác hơn là tạo 2 divs, 1 lồng nhau bên trong khác với div bên ngoài có độ dày lớn hơn, hoặc thông qua việc sử dụng các hình ảnh biên giới là có cách nào tôi có thể làm điều đó với CSS chỉ với 1 div? chỉ định kiểu đường viền: double; và vẫn có thể làm cho đường viền bên ngoài dày hơn.


24
2017-11-15 03:28


gốc




Các câu trả lời:


Các phác thảo được bao gồm trong đặc tả CSS3 và cho phép cả đường viền và đường viền được áp dụng cho một phần tử đơn lẻ.

Thuộc tính outline giống hệt với lệnh border. Tuy nhiên, thuộc tính offset bổ sung cho phép biên giới được di chuyển xa hơn bên trong hoặc bên ngoài phần tử.

Tôi sử dụng phác thảo để cung cấp cho biên giới 2 màu sắc khác nhau, thay đổi mã để cung cấp cho biên giới của bạn 2 kích cỡ khác nhau.

#box {
border: 1px double #000;
outline: 2px solid #699;
outline-offset: -9px;
}

50
2017-11-15 03:37



Chỉ cần xem ra cho sự khác biệt. Ví dụ: nếu bạn áp dụng hộp bóng cho phần tử, đường viền sẽ tuân theo bóng và độ lệch của nó, chứ không phải hộp gốc. - Marek Maurizio
Các phác thảo không mới đối với CSS3 - w3.org/TR/CSS21/ui.html#dynamic-outlines - BoltClock♦
Cuối cùng tìm thấy nó ... - myTerminal
Cũng lưu ý rằng outline-offset không được hỗ trợ trong IE. - d4nyll
phác thảo không thực sự giống hệt nhau. ví dụ, không có thứ như "bán kính phác thảo" để bạn chỉ có thể sử dụng nó cho các phần tử hình hộp. - Radomír Laučík


Không, không thể. Chiều rộng đường viền CSS chỉ định tổng chiều dày của đường viền, bất kể kiểu đường viền. Tôi không thấy cách nào tốt hơn là gói nó trong một DIV khác.

Chỉnh sửa: Bạn có thể hack nó bằng cách sử dụng outline, nhưng có một sự khác biệt tinh tế giữa outline và border.

border: double 4px black;
outline: solid 3px black;

(điều này sẽ tạo ra một "bên trong" và 4px bên ngoài "biên giới", nếu bạn có thể gọi nó là)


7
2017-11-15 03:30



Tuyệt vời "giải pháp" IMO! - Trufa
Chỉ cần vấp ngã khi phác thảo quá, trông giống như công cụ thích hợp cho công việc! :). Điều đó đánh dấu câu hỏi đầu tiên của tôi trên trang web này: D. - learnjourney


Hoặc bạn có thể sử dụng một hình ảnh đường viền với những thứ mới lạ trong CSS3, mặc dù nó sẽ không được hỗ trợ trong hầu hết các trình duyệt hiện đang được sử dụng.


0
2017-11-15 03:31





Bạn cũng có thể sử dụng: trước phần tử giả như sau:

https://stackoverflow.com/a/11179169/1468708

Vì vậy, bạn có thể có một đường viền đôi với độ dày khác nhau chỉ ở phía dưới, ví dụ.


0
2018-06-24 22:40