1,border-width 不支持百分比
类似的out-line,box-shadow,text-shadow,...
borer-width 支持关键字 thin 1px; medium 厚薄均匀 3px; thick 厚的5px;
2,border-style:solid;
border-style:dashed;虚线 IE 2:1; chrome/firefox 3:1
border-style:dotted;点线 IE 圆点 chrome/firefox 方点
border-style:double;双线
三大杠效果
{
width: 120px;
height: 20px;
border-top: 60px double;
border-bottom: 20px solid;
}
![](https://i-blog.csdnimg.cn/blog_migrate/c2fd48c3687e8109dad07fcfcdd2c6e9.png)
border-style:inset;内凹
3,border-color 没有指定bordere-color的时候,会使用color作为边框色。
4,border与background定位
background定位的局限:只能相对于左上角定位不能相对由下角。(2.1)
kackground-position定位 图片距离右边框50像素
border-right:50px solid transparent;
background-position:100% 40px; /* 100% 右侧定位不计算border区域*/
5,border与三角等图形构建
三角形{width: 0px ;height: 0px;
border: 100px solid ;
border-color: red red ;}
6,border的透明边框
优雅的增加啊相应区的大小,
.checkbox { border:2px solid transparent;
box-shadow: inset 0 1px, inset 1px 0,inset -1px 0 ,inset 0 -1px;
background-color: #fff;
-webkit-background-clip: border-box;
-moz-background-clip: border-box;
background-clip: content-box;
color :#d0d0d5;
}
增加可视渲染区域
.icon {
position: relative; left:-20px;
border-right: 20px solid transparent;
filter: drop-shadow(20px 0 #ffffff);
}
7,border在布局中的应用
等高布局 /*不支持百分比布局*/
原理:
<div class="box">
<nav class="left">
<h3>导航1</h3>
</nav>
<section>
<div class="module">模块1</div>
</section>
</div>
/*****************/
.box {
border-left: 300px solid #222;
}
.left {
width: 300px;
margin-left: -300px;
float: left;
}