这个边界发生了什么？

Question

我正在玩CSS边框并做到了这一点：

border-style: double dashed dashed solid;

有人可以解释为什么这样做吗？更改border-width也会有些奇怪的事情。

JSBIN

Answer 1

如果你写border-style: double dashed dashed solid;，你可以立刻为边框的所有四边设置边框样式。您可以将其读作border-style: <top> <right> <bottom> <left>;，因此它是：

的简写

border-top-style: double;
border-right-style: dashed;
border-bottom-style: dashed;
border-left-style: solid;

Answer 2

您也可以使用此css，在bottom right left中使用实线边框，并在top中使用双重原因。顶部边框，double样式和边框在第一个图像的另一边，如果你围绕实线或虚线边框像第二个图像产生你的形状。它就像你有一个图像的金属框架并围绕它。看那里的例子：

1. 见：



background: none repeat scroll 0 0 gray;
border-color: red;
border-radius: 0;
border-style: double solid solid solid; // top, right, bottom, left
border-width: 15px;
height: 150px;
width: 150px;

如果您使用border-radius到50%对边框进行舍入，则它变为：

1. 回合：

   border-radius：50％;



如果您在顶部有inset原因：

border-style: inset solid solid solid; // top, right, bottom, left