在今天之前,我对css的border属性的认知,只停留在border:5px solid red;
或者是
border-left: 1px solid #f00;
border-right: 1px solid #f00;
border-bottom: 1px solid #f00;
border-top: 1px solid #f00;
又或者是把solid实线改成虚线等等的样式。但其实利用设置border的样式,我们可以制作出一些特别的图形,类似三角形、梯形等等的形状来点缀我们的页面,从而使页面变得更加美观。下面我们来看一下代码:
<!DOCTYPE html>
<html>
<head>
<title>css动画</title>
<meta charset="utf-8">
<style>
.up{
width: 0px;
height: 0px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid red;
border-top: 20px solid transparent;
}
</style>
</head>
<body>
<div class="up"></div>
</body>
</html>
运行之后的结果为:
然后有点惊讶的发现,将div的宽高设置为0px,只利用边框就出现了一个三角形.此时将上边框设置颜色:
.up{
width: 0px;
height: 0px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #f00;
border-top: 20px solid #f00;
}
运行结果为:
将宽度设置为一定的数值不为0时 代码如下:
.up{
width: 100px;
height: 0px;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid transparent;
border-top: 40px solid #f00;
}
运行结果为:
同样的,如果想改变图形的方向。我们只需将那个border设置颜色即可。通过改变边框的宽度就会出现更多各种各样不规则的图形。观察下方代码:
.up{
width: 0px;
height: 0px;
border-left: 40px solid #000;
border-right: 40px solid green;
border-bottom: 40px solid pink;
border-top: 40px solid #f00;
}
运行结果为:
我们会发现,当宽度为0,高度为0 时。四个边框设置宽度以后,组成了一个框。
设置上宽度和高度以后我们会发现:
.up{
width: 100px;
height: 100px;
border-left: 40px solid #000;
border-right: 40px solid green;
border-bottom: 40px solid pink;
border-top: 40px solid #f00;
}
从而打破了我以前认为的边框是一条直线,或者说设置上宽度以后的边框是一个矩形的想法。其实仔细想想,可以看做是拼图,可能就比较容易理解。
可能只是我本人刚刚发现这个。大家早就发现了。不过还是觉得前端高深莫测,仍需好好探索!