CSS笔记 —— 边框

边框 - border

border用于设置盒子的边框。边框相对于content/padding/margin来说特殊一些。边框具备宽度width、样式style、颜色color。

边框宽度：border-top-width、border-right-width、border-bottom-width、border-left-width。border-width是上面4个属性的简写属性。

边框颜色：border-top-color、border-right-color、border-bottom-color、border-left-color。border-color是上面4个属性的简写属性。

边框样式：border-top-style、border-right-style、border-bottom-style、border-left-style。border-style是上面4个属性的简写属性。

边框的样式有很多, 我们可以了解如下的几个。groove：凹槽, 沟槽, 边框看上去好像是雕刻在画布之内。ridge：山脊, 和grove相反，边框看上去好像是从画布中凸出来。

边框颜色、宽度、样式的编写顺序任意。

圆角 – border-radius

border-radius用于设置盒子的圆角。

border-radius常见的值:

• 数值: 通常用来设置小的圆角, 比如6px;
• 百分比: 通常用来设置一定的弧度或者圆形;

border-radius事实上是一个缩写属性。将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 简写为一个属性。

如果一个元素是正方形, 设置border-radius大于或等于50%时，就会变成一个圆。

.box {
      width: 100px;
      height: 100px;
      border: 10px solid red;
      background-color: #0f0;
      border-radius: 50%;
    }