border是一个很有意思的css属性,巧妙使用border,有些效果就可以不用图片
border的关键字:thin,薄的,等同于1px
medium(默认值),中等的,相等3px
thick,厚的,等同于4px
border-style的默认值是none而不是solid,所以不设置border-style值的时候是没有边框出现的。
1、border-style:dotted的妙用
我们要实现圆角效果想到的就是border-radius:50%。然而该属性ie8是不支持的,而在IE浏览器下点线是由小圆点组成的。所以我们可以巧妙运用该属性来实现圆角效果,而不用借助图片
比如我们需要一个50px的圆
.box{
width:50px;
height:50px;
overflow:hidden;
}
.dotted{
width:100%;
height:100%;
border:50px dotted #cd0000;
}
<div class="box">
<div class="dotted"></div>
</div>
实现的效果就是这样的
2、border-style:double的妙用
知识点:border-style:double的表现规则:双线宽度永远相等,中间间隔±1
border-style:double实现“三道杠效果”
div{
width:100px;
height:20px;
border-top:60px double;
border-bottom:20px solid;
}
实现的效果:
当border没有设置颜色值的时候,跟字体颜色保持一致
4、实现+号效果
.add{
width:76px;
height:76px;
color:#ccc;
border:2px dashed;
position:relative;
}
.add:hover{
color:#34538b;
}
.add:before,.add:after{
content:'';
position:absolute;
top:50%;
left:50%;
}
.add:before{
width:20px;
border-top:4px solid;
margin:-2px 0 0 -10px;/*此处是为了居中,-2px为border宽度的一半,向上偏移2实现垂直方向居中,-10px是元素宽度的一半,向左偏移10像素,实现水平方向居中*/
}
.add:after{
height:20px;
border-left:4px solid;
margin:-10px 0 0 -2px;
}
实现效果
方法总结:因为border的颜色是和字体颜色一致,所以hover的时候+号跟随虚线边框的颜色改变,所以不用担心hover时颜色不一致的问题
5、border绘制三角形
等腰三角形
.san{
width:0;
border:10px solid;
border-color:#f30 transparent transparent;
}
效果
一侧开口的三角形效果
.san{
width:0;
border-width:20px 10px;
border-style:solid;
border-color:#f30 #f30 transparent transparent;
}
效果