CSS理解之border
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;点线
Paste_Image.png
4.border-style: double;双线
Paste_Image.png
由于它兼容性非常好，所以我们可以利用它进行一些布局，例如我们可以利用它绘制一些图形，我们可以通过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>
Paste_Image.png
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>
Paste_Image.png
当把宽度变成0时：
div{
width:0;
height:100px;
border:100px solid;
border-color:red green blue yellow;
}
Paste_Image.png
当把高度变成0时：
div{
width:100px;
height:0;
border:100px solid;
border-color:red green blue yellow;
}
Paste_Image.png
当把宽高都变为0时：
div{
width:0;
height:0;
border:100px solid;
border-color:red green blue yellow;
}
Paste_Image.png
把左和下三角颜色变为透明，右三角变为红色：
div{
width:0;
height:0;
border:100px solid;
border-color:red red transparent transparent;
}
Paste_Image.png
三角的应用场景：
Paste_Image.png
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.07.26 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录