border
- 定义:元素外边距内就是元素的边框。元素的边框就是围绕元素内容和内边距的一条或者多条线。因此,元素的背景会在外边框边界处停止,因为背景不会延伸到外边距以内,而边框就在外边距内部。
每个方向的边框都有三个方向:
- 宽度或者粗细
- 样式或者外观
- 颜色
边框宽度:
一般边框宽度的默认值为medium,大概2个像素,thin、medium、thick这些关键字不一定对应某个特定的宽度,它们只是相对定义,根据规范,thick总是笔medium宽,medium则总是比thin宽。尽管如此,宽度也不一定能显示出来,因为边框的默认样式是none(样式为 hidden时边框也不会出现),如果一个边框没有样式,也就不会存在。
如果一个水杯是空的,你就不能把它描述为它装着没有东西,杯子里确实有内容物时才能讨论被子内容物的高度。同样,只有当边框存在时才能讨论边框的宽度。
记住这一点就可以避免乍看上去样式能出现,但却忘了边框默认样式是none而最终导致边框无法出现而迷惑的情景,所以,如果你希望边框出现,就必须声明一个边框样式。
下面重点看看各种情况下的边框宽度
如下css代码:
.tri {
width: 78px;
height: 16px;
border: 0;
background-color: red;
display: inline-block;
}
.tri-test {
border-top: 50px solid lightsalmon;
border-right: 50px solid lightseagreen;
border-left: 50px solid lightskyblue;
border-bottom: 50px solid lightslategray;
}
效果如图:
效果和我们所想没有偏差,那我们把内容的宽高都变为0以后:
边框的宽度是不是感觉已经发生了变化?或者说还不明确边框的宽度是什么定义?
它们边框宽度都是50px,再看下图红色箭头
边框真正的宽度可以理解为上图中用红色箭头标记的路径。
这时就可以初步得出结论:它表示从内容区域边界径直往指定方向(top、left、right或者bottom)的距离。
当我们改变右边框的宽度为160px时
由图可见随着内容区域大小的变化,定义的边框宽度并没有发生变化,由此确定了边框宽度的定义。
那么这样的发现有什么实际用处呢?
用css绘制各种样式的三角形
在我们明确了边框宽度的定义后,更改边框的颜色和更改边框的数量可以实现如下效果:
.tri-test { border-top: 80px solid lightsalmon; border-right: 80px solid transparent; }
.tri-test {
border-top: 80px solid lightsalmon;
border-right: 80px solid transparent;
border-left: 80px solid transparent;
}
.tri-test {
border-right: 43px solid transparent;
border-left: 151px solid transparent;
border-bottom: 135px solid lightslategray;
}
制作原理其实很简单,我们参照个基本的图形来制作三角形
比如说你想做个这个样子的三角形:
第一步;我们把这个三角形的底水平或者垂直放置
或者
第二步:将高平移至俩角处,并且将头部连接起来:
第三步: 到这一步就可以很清晰了,对比之前的基本图我们发现决定这个三角形的参数有下边框的宽度、左边框的宽度和右边框的宽度对应图上就是黄、绿、蓝色的线,将左边框和右边框的颜色调为透明,再做适当旋转即可。我的参数如下:
.tri-test {
border-right: 50px solid transparent;
border-left: 150px solid transparent;
border-bottom: 50px solid lightpink;
transform:rotate(310deg);
}
到这里其实还可以将三角形组合起来再配上border-radius属性,比如这样:
.tri-test {
border-top: 90px solid transparent;
border-right: 90px solid #ffff00;
border-left: 90px solid #ffff00;
border-bottom: 90px solid #ffff00;
border-radius: 90px;
transform:rotate(90deg);
}
.tri-test {
border-top: 225px solid transparent;
border-right: 225px solid transparent;
border-left: 65px solid lightpink;
border-bottom: 65px solid lightcoral;
border-radius: 20px;
transform:rotate(225deg);
}