简介
今天主要介绍一些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做出各种图形,(圆,椭圆,圆角矩形,三角形,不规则图形).
