边界设置右上左

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;