简介

今天主要介绍一些border的使用以及border-radius的原理.

内容

border 简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性：

• border-width
• border-style
• border-color
  如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。

• border-width
  border-width设置边框的宽度.例:

-css:
 .border-base {
            border: 1px solid lightskyblue;
            width: 100px;
            height: 40px;
            margin: 10px;
        }
        .border-width-10 {
            border-width: 10px;
        }
        
        .border-width-20 {
            border-width: 20px;
        }
        
   
-html:
    <div class="border-base ">
    </div>
    <div class="border-base border-width-10">
    </div>
    <div class="border-base border-width-20">
    </div>
 

border-width.png

• border-style
  border-style设置边框的样式.例:

    -css :
       .border-base {
            border: 5px solid lightskyblue;
            width: 100px;
            height: 40px;
            margin: 10px;
        }
        .border-style-dash {
            border-style: dashed;
        }
        
        .border-style-solid {
            border-style: solid;
        }
        
        .border-style-dotted {
            border-style: dotted;
        }
        
        .border-style-double {
            border-style: double;
        }
-html:
    <div class="border-base border-style-solid">solid </div>
    <div class="border-base border-style-dash"> dash</div>
    <div class="border-base border-style-dotted"> dotted</div>
    <div class="border-base border-style-double"> double</div>

border-style.png

• border-color
  border-color设置边框的颜色.例:

-css:
        .border-color1 {
            border-color: lightcoral;
        }
        
        .border-color1 {
            border-color: goldenrod;
        }
-html:
    <div class="border-base border-color1"></div>
    <div class="border-base border-color2"></div>

border-color.png

border-radius

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。( border-top-left-radius 左上角,border-top-right-radius 右上角,border-bottom-left-radius 左下角,border-right-radius 右下角).
例:

-css:
 .border-radius {
                 border-radius: 20px;
              }

-html:
     <div class="border-base border-radius"></div>

border-radius.png

• border-radius的原理

border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。例如设置border-radius:20px.

eg2.png

**border-radius是以某一角的水平半径和垂直半径画平滑曲线而成的(以左上角为例)
**

eg1.png

border-left-radius:50px是指水平半径和垂直半径都是50px.
若border-left-radius:50px 20px则是只水平半径为50px,垂直半径为20px.

eg4.png

这里要强调一点寻找左上角的原点时要将边框的宽度也计算进去(可简单认为是边框的最左上角的点)

除此之外,当我们将四个边框的颜色设置不同时,会有这种情况.

eg5.png

就像我们的照片的相框一样,border会以梯形的形状展现.只不过颜色相同时我们看不出来而已.
通过这个特性我们可以画出如下的图形:

eg6.jpeg

这是将盒子的宽度和高度设置为0,所以出现了三角的形状

结束

我们可以通过border-radius做出各种图形,(圆,椭圆,圆角矩形,三角形,不规则图形).