border-style:none 默认值是none 一般多出现在重置边框样式的时候
例 实现一个没有下边框的边框效果
.box{
width:120px;
height: 20px;
border-top:60px double;
border-bottom: solid 20px;
}
div{
border:solid 1px ;
border-bottom: none;
}
或
div{
border:solid 1px ;
border-bottom:0;
}
或两个一起写， 这样写渲染性能最高
div{
border:solid 1px ;
border-bottom:0 none;
}
border -color 和color
当没有指定border-color颜色值的时候，会使用当前元素的color计算值作为边框色
具有类似特性的CSS属性还有 outline box-shadow 和 text-shadow
例子：上传图片时候后面会跟着一个带有加号的框框按钮，表示可以继续传图 然后hover的时候回变个色
使用border 实现，hover变色的时候，只需重置1处，也就是重置元素本身的color即可
因整个图形都是使用border绘制的，同时颜色缺省，所以所有的图形颜色自动跟着一起变
<style>
.add{
display: inline-block;
width: 72px;
height: 72px;
color:#ccc;
border:dashed 2px;
position: relative;
text-indent: -12em;
transition: color .25s;
}
.add:hover{
color:#34583d;
}
.add::after,.add::before{
content: "";
position: absolute;
top: 50%;
left: 50%;
}
.add::before{
width: 20px;
border-top:solid 4px;
margin: -2px 0 0 -10px;
}
.add::after{
height: 20px;
border-left:solid 4px;
margin: -10px 0 0 -2px;
}
</style>
<a href="" class="add" title="添加图片">继续上传</a>
一个边框可以有多个样式 顺序和padding一样 值的顺序为 上右下左
p.aside{border-style:solid dashed dotted double;}
也可设置单边样式
border-top-style
border-right-style
border-bottom-style
border-left-style
border常与单边框结合使用
例 为一个标题的三边设置实线边框 ，但左边没有边框
h1{border-style:solid solid solid none;}
等价于
如果用第二种方式，要把单边属性放在简写形式后面
这是因为border-style:solid 其实相当于border-style:solid solid solid solid
如果单边属性放在简写形式的前面 简写中的值会把单边属性中的值none 覆盖掉
h1{border-style: solid; border-left-style: none;}
border-width
可以的长度值(4px 或 0.1em), 也可以是三个关键字中的一个
原文：https://www.cnblogs.com/qiqi9/p/14269885.html