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
你也可以自己试试给四边设置不同的宽度，颜色来观察效果。
以上。
