Kết hợp đường viền trên cùng, đường viền phải, đường viền trái, đường viền dưới cùng trong CSS

Question

Có cách nào kết hợp đường viền biên giới, đường viền phải, đường viền trái, đường viền dưới trong CSS như kiểu viết tắt siêu tốc hay không.

ví dụ:

border: (1px solid #ff0) (2px dashed #f0F) (3px dotted #F00) (5px solid #09f); 

Answer 1

Không, bạn không thể đặt tất cả chúng trong một tuyên bố duy nhất.
Tại trường hợp chung, bạn cần ít nhất ba đặc tính:

border-color: red green white blue; 
border-style: solid dashed dotted solid; 
border-width: 1px 2px 3px 4px; 

Tuy nhiên, đó sẽ là khá lộn xộn. Nó sẽ dễ đọc hơn và duy trì với bốn:

border-top: 1px solid #ff0; 
border-right: 2px dashed #f0F; 
border-bottom: 3px dotted #f00; 
border-left: 5px solid #09f; 

Answer 2

Hoặc nếu tất cả các biên giới có phong cách tương tự, chỉ cần:

border:10px; 

Answer 3

Không bạn không thể cài đặt chúng như là duy nhất một ví dụ nếu bạn có div { border-top: 2px solid red; border-right: 2px đỏ đậm; border-bottom: 2px đỏ đậm; border-left: 2px đỏ đậm; } tính chất tương tự cho tất cả các fours sau đó bạn có thể đặt chúng trong dòng

div{border:2px solid red;} 

Answer 4

trường hợp của bạn là một một cực đoan, nhưng đây là một giải pháp cho những người khác phù hợp với một kịch bản phổ biến hơn muốn phong cách ít hơn 4 đường viền chính xác giống nhau.

border: 1px dashed red; border-width: 1px 1px 0 1px; 

đó là một chút ngắn hơn, và có thể dễ dàng hơn để đọc hơn

border-top: 1px dashed red; border-right: 1px dashed red; border-left: 1px dashed red; 

hoặc

border-color: red; border-style: dashed; border-width: 1px 1px 0 1px;