CSS深入理解之border篇
程序员文章站
2022-03-29 16:04:40
...
border的属性
1.border-width:不支持百分比,支持关键字,thin(1px),medium(默认值,3px,默认值是3px的原因是只有当border是3px及以上时,border-style才有效
果),thick(5px)
2.border-style:有不同值,下面分析分别为不同值时的应用
a.solid:可以实现三角,梯形
<!DOCTYPE html>
<html>
<head>
<title>用solid实现三角和梯形</title>
<meta charset="utf-8">
<style type="text/css">
.triangle{
width: 0px;
height: 0px;
border-style:solid;
border-width: 50px;
border-color: red transparent transparent transparent;
}
.trapezia{
width: 40px;
height: 40px;
border-style: solid;
border-width: 50px;
border-color:transparent transparent green transparent ;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="triangle"></div>我是三角形
<div class="trapezia"></div>我是梯形
</body>
</html>
b.dashed:虚线,在chrome/Firefox浏览器中,虚线和实线的比例是3:1(稀),在IE浏览器中,比例是2:1(密)
c.dotted:点线,在chrome/Firefox浏览器中,是方点,在IE浏览器中,是圆点(可以利用圆点实现圆角效果)
d.double:双线,计算规则,双线宽度永远相等,中间间隔 -1,例如,3px=1(内) 1(中间间隔) 1(外),可以实现三道杠图形。
e.inset(内凹),outset(外凸),ridge(沟槽):风格过时,兼容性差,没有什么使用场景
3.border-color:在不指定color时,使用color作为边框色,可以利用这一特性,简化链接改变颜色时的css样式代码。例如:
<!DOCTYPE html>
<html>
<head>
<title>鼠标移动时边框颜色的改变</title>
<meta charset="utf-8">
<style type="text/css">
.a{
width: 30px;
height: 30px;
padding: 20px;
margin:30px;
color: red;
border:1px solid;
}
.a:hover{
color: blue;
/* border:1px solid;
*/ }
</style>
</head>
<body>
<div class="a">哈哈</div>
</body>
</html>
4.利用border可以实现背景图像的定位,因为背景图像在定位时是不计算border的
5.利用border实现等高布局,缺点是不支持百分比宽度
(4,5类似,都是利用border,使得与某侧距离固定)