邊界設置右上左

Question

我有以下的CSS代碼： -

border:5px solid grey !important; 

將應用該樣式設置到所有邊境四個維度上，下，右左&。但我怎麼可以定義寄宿生只適用於左上角&。而不必爲每個定義單獨的樣式？ 感謝

Answer 1

號，這是不可能與此border:5px solid grey !important;速記方法。

您需要按照下面提到的方式聲明它們以實現您正在查找的內容。

WORKING DEMO

的HTML：

<div>ABCD</div> 

的CSS：

div{border-width: 5px 5px 0px 5px; border-style: solid; border-color: grey;} 

FURTHER REFERENCE

希望這會有所幫助。

Answer 2

border-right:5px solid grey !important; 
border-top:5px solid grey !important; 
border-left:5px solid grey !important; 

或其他短的方法：

border:5px solid grey !important; 
border-bottom: 0 !important; 

，或者你可以利用box-shadow：

box-shadow: 
inset 5px 0 0 red, /* LEFT */ 
inset 0 0px 0 blue, /* BOTTOM */ 
inset 0 5px 0 green, /* TOP */ 
inset -5px 0 0 yellow; /* RIGHT */ 

Fiddle is here

Answer 3

您可以定義所有尺寸的邊界然後重新定義邊框底部：

border:5px solid grey !important; 
border-bottom:5px solid transparent !important; 

您也可以下邊框設置爲none或0（這意味着元素不會有底部邊框）。

P.S.當您使用!important定義邊框時，您還需要在邊框的重新定義中使用它。

JSFiddle

Answer 4

你可以試試，

border:5px solid grey; 
border-bottom:0px; 

Answer 5

只需在該行代碼中指定您想要的邊界區域即可。

border: solid grey!important; 
border-width:5px 5px 0 5px!important; 

Answer 6

您可以使用border-bottom：

border:5px solid grey; 
border-bottom:none;