顶部、右侧和左侧的边框设置

Question

我有以下CSS代码：

border:5px solid grey !important;

这将应用样式设置到所有四个边框的上、下、右和左。但是，我如何定义边框仅适用于上部、右侧和左侧，而不必为每个边框定义单独的样式呢？

- John John

Answer 1

您可以尝试，

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

- Kishori

Answer 2

您可以定义所有维度的边框，然后重新为底部定义边框：

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

同时，您可以将底部边框设置为none或0（这表示该元素将没有底部边框）。

P.S. 如果在定义边框时使用了!important，则在重新定义边框时也需要使用它。

JSFiddle

- Epsil0neR

Answer 3

不，使用这种 border:5px solid grey !important; 的简写方法是不可能实现的。

你需要按照下面的方式声明它们才能达到你想要的效果。

演示

HTML 代码：

<div>ABCD</div>

CSS：

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

更多参考资料

希望这有所帮助。

- Nitesh

Answer 4

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   */

这里是示例代码

。

- zkanoca

---

第二个不可以，!important 会覆盖 bottom:0 的设置。 - peterh

Answer 5

只需在代码行本身指定要添加边框的区域，就像这样。

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

- Akhil

---

谢谢你提醒，你是对的，我已经纠正了，所以给你一个赞（+1）。 - Akhil

Answer 6

你可以使用 border-bottom：

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

- Othman Mahmoud