CSS边框和圆角边框

边框的四大要素

• 边框宽度
• 边框颜色
• 边框样式
• 边框方向（给哪一个边设置样式）

bottom、left、right、top

 border-top: 4px red solid;

边框设置

语法： border-边框方向：边框宽度 边框颜色 边框样式

• 边框宽度可以为px、em、rem的单位都可以，但是1%不可以，推荐使用px，稳定
• 边框颜色：名称、16进制、rgb、rgba的任意一种，后三种较为推荐
• 边框样式：solid实线、dashed虚线、double双实线边框、dotted点状线
• 边框反向写在属性名中，即border-xxx
• 一般边框设置四周都一样
• 当三种属性值交换位置，仍然生效

圆角边框的两大要素

通过水平和垂直方向可以表示一个角

• 圆角的方向
  • 方向1：上下
  • 方向2：左右
• 圆角的半径
  • 水平半径和垂直半径

圆角边框的设置

     //设置左下角的圆角边框
     border: 4px red solid;
     //先设置水平半径，再设置垂直半径
     border-bottom-left-radius: 20px 30px;

语法：
border-垂直方向-水平方向-radius：水平半径 垂直半径

• 属性之间用空格隔开
• 水平半径和垂直半径的值可以用合法的尺寸单位，可以使用百分比
• 当圆角半径只设置了一个值时，另一个值和他设置的一样
• border-垂直半径-水平半径-radius：50px
• 水平半径 和垂直半径都是50px
• 若设置为百分比，则表示半径是长或者宽的百分比
• border-垂直半径-水平半径-radius：50% 20%
• 水平半径为长度的50%，垂直半径为宽度的20%
• 椭圆的画法（若长=宽，则为圆）

            width: 500px;
            height: 300px;
            background-color: beige;
            line-height: 300px;
            text-align: center;
            border: 4px red solid;
            
            border-top-left-radius:50%;
            border-top-right-radius:50%;
            border-bottom-left-radius:50%;
            border-bottom-right-radius:50%;

• 同时设置四个圆角边框

//上左角 上右角 下右角 下左角
border-radius: 10px 20px 30px 40px;

上左角→下右角顺时针
border-radius: 上左角 上右角 下右角 下左角
border-radius: 上左角 和下右角 上右角和下左角（若只设置了两个值，则对角使用的半径一样）