Question

快速提问，这可能是愚蠢或容易的。我不知道。这就是我要问的原因。

是否可以在一个CSS行中调用多个边框属性？

例如：

border-top, border-right: xxx;

甚至：

border-top,right,left: xxx;

我很好奇。

由于

Answer 1

会是这样的：

.border {
  border-width: 1px 2px 3px 0;
  border-style: solid dotted dashed none;
  border-color: red blue green transparent;

  display: block;
  padding: 10px;
  text-align: center;
}

<div class="border">Mixed borders</div>

Answer 2

当然，就像margin，padding等，您可以提供4个值（顶部，右侧，底部，左侧）或 2个值（顶部和底部，左侧和左侧）右）

div {
  height: 100px;
  width: 100px;
}
#a {
  border: 1px solid red;
}
#b {
  border-color: green;
  border-style: solid;
  border-width: 5px 3px 9px 0;
}
#c {
  border-color: tomato;
  border-style: solid;
  border-width: 15px 1px;
}

<div id="a"></div>
<br />
<div id="b"></div>
<br />
<div id="c"></div>

CSS - 一行中的多个边框类型

2 个答案: