css深入理解之border

2019-03-19

border-width的一些知识点

1、border-width不支持百分比

1
2
3

<div style="border: #FF0000 solid; border-width: thin;">
	border-width不支持百分比
</div>

2、 border-width支持关键字（默认）

1
2
3

<div style="border: #FF0000 solid; border-width: medium;">
	border-width的默认值是medium
</div>

3、为什么默认时medium呢,因为border-style: double;在width是thin的时候是不生效的

1
2
3

<div style="border: #FF0000 solid; border-width: medium;border-style: double;">
	border-width的默认值是medium
</div>

各种border-style类型

1、 solid实线

1	<div style="border-style: solid;">div</div>

2、 dashed虚线

<div style="border-style: dashed; border-width: 100px; border-image: url(http://www.w3school.com.cn/i/border.png);">divdivdivdivdivdivdivdivdivdivdivdivdivdivdivdivdivdivdivdiv</div>

这里由于兼容性，虚线快的长宽比是不一样的
   如果一定想处理的话，我们可以使用border-image: url()的方式，自定义边框图片

3、 dotted点线

1	<div style="border-style: dotted;">div</div>

兼容性问题

我们可以利用ie的圆自己搞一些事情,绘制一个正方体或者一个圆

<div style="width: 150px; height: 150px; overflow: hidden;">
	<div style="border:149px dotted;width: 100%; height: 100%;">
	</div>
</div>

4、 double双线

<div style="border-style: double;">
	double双线
</div>

计算规则：双线宽度永远相等，中间间隔±1


.doubleImage{
	width: 120px;
	height: 20px;
	border-top: 60px double;
	border-bottom: 20px solid;
}
- 图形绘制
<div class="doubleImage"></div>

border-color和color

1
2
3

- 有border-color时使用，没有时使用color
	<div style="color: #FF0000;border: solid">大树</div>
	<div style="color: #FF0000;border: solid #0000FF">大树</div>

border和background定位

- background定位的局限
	- 只能相对左上角定位，不能相对于右下角，想实现距离右侧50px就没办法实现了
	.p{
			background-position: 100% 40px;
			border-right: 50px transparent;
	}

border三角形的绘制

三角图形的绘制

.triangle{
	width: 0px;height: 0px;
	border-width: 12px 20px;
	border-style: solid;
	border-color: red red transparent transparent; 
}
<div class="triangle"></div>

参考视频：https://www.imooc.com/video/13376