border: 1px solid red;(border-width、border-style、border-color)
1.border-width不支持百分比
border-width
你可以写成10px、10cm、10em、10pt,都有效果,但是你不能写成10%,类似的还有outline
、box-shadow
、text-shadow
等等。(补充:width、margin、padding都支持百分比)
border-width
支持关键字:
- thin:细的,1px;
- medium(默认值) :中等的,3px;
- thick:厚的,5px;
2.了解各种border-style类型
1.border-style: solid;
实线
2.border-style: dashed;
虚线
3.border-style: dotted;
点线
4.border-style: double;
双线
由于它兼容性非常好,所以我们可以利用它进行一些布局,例如我们可以利用它绘制一些图形,我们可以通过border-style: double来实现常见的三条杠图标效果
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.example{
width: 120px;
height: 20px;
border-top: 60px double;
border-bottom: 20px solid;
}
</style>
</head>
<body>
<div class="example"></div>
</body>
</html>
3.border-color与color
一句话概括这两个css属性之间的关系那就是:border-color就是color,更准确的来讲就是border-color默认颜色就是color,当没有指定border-color的时候,会使用color作为边框色。
4.border与background定位
background定位的局限:只能相对左上角数值定位,不能相对右下角。
5.border与三角等图形构建
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:100px;
height:100px;
border:100px solid;
border-color:red green blue yellow;
}
</style>
</head>
<body>
<div class="example"></div>
</body>
</html>
当把宽度变成0时:
div{
width:0;
height:100px;
border:100px solid;
border-color:red green blue yellow;
}
当把高度变成0时:
div{
width:100px;
height:0;
border:100px solid;
border-color:red green blue yellow;
}
当把宽高都变为0时:
div{
width:0;
height:0;
border:100px solid;
border-color:red green blue yellow;
}
把左和下三角颜色变为透明,右三角变为红色:
div{
width:0;
height:0;
border:100px solid;
border-color:red red transparent transparent;
}
三角的应用场景: