border这个属性用来设置盒模型的边框。它是盒模型的重要组成部分。

本文记录它的几种用法。

页面结构

html如下
<div class="box"></div>
css如下：
.box{
    width:100px;height:100px;
}

下面涉及的css样式都是基于如上基本结构。

1. 设置四边

.box{
   border:1px solid #ccc
}

2. 单独设置某一个边

.box{border-top:1px solid #ccc}

3. 利用 border-radius 设置正圆效果

.box{widht:100px;height:100px;border-radius:50px;}

border-radius的单位也可以是百分比。如上可以写成border-radius:50%，它会实现一个标准的正圆角（不是椭圆）效果。

4. 单独设置某一个角的圆角效果

一个盒子有四个角，我们也可以单独设置某一个角的圆角效果。这一个细节非常有用。

.box{width:100px;height:100px;background:red;border-top-left-radius:50%;}

image.png

同样类似还有：border-top-right-radius; border-bottom-left-radius;border-bottom-right-radius;

.box{
  width:100px;
  height:100px;
  background:red;
  border-top-left-radius:50%;
  border-bottom-right-radius:90%;
  border-top-right-radius:40%;
  border-bottom-left-radius:50%;
}

image.png

设置三角形效果

css面试题经常会考这一个。

.box{width:0;height:0;border:10px solid transparent; border-top-color:red}

漂亮的圆形弧线

这个就比较小众了。

.box{
  width:200px;
  height:200px;
  border-style:solid; /*整体设置边框线的线型是实线*/
  border-color:red transparent transparent transparent; /*单独设置四条边框线的颜色*/
  border-radius: 50%;/*设置圆角效果*/
  border-width:5px 5px 0px 0px;/*单独设置四条边框线的粗细*/
}

image.png

你也可以自己试试给四边设置不同的宽度，颜色来观察效果。

以上。