css写出0.5px边框(一)
2016-11-03 18:22
127 查看
在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0.5px边框
1.
html部分
<div class="border">测试0.5px边框</div>
css部分
.border{
position: relative;
color: #555;
font-size: 14px;
line-height: 41px;
width:200px;
}
.border:after{
height: 1px;
content: '';
width: 100%;
border-bottom: 1px solid #e8e8e8;
position: absolute;
bottom: -1px;
right: 0;
transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
z-index: 10;
}
用添加伪元素的方法添加下边框,再利用transform在y轴缩小1倍
2.
.border{
width:200px;
color: #555;
font-size: 14px;
line-height: 41px;
border-bottom: 1px solid transparent !important;
-webkit-border-image: url("../img/line-bottom.png") 2 0 stretch;
border-image: url("../img/line-bottom.png") 2 0 stretch;
-o-border-image: url("../img/line-bottom.png") 2 0 stretch;
-moz-border-image: url("../img/line-bottom.png") 2 0 stretch;
border-width: 0 0 1px;
}
line-bottom.png 是宽1px 高2px的小图片,1px透明,1px用border的颜色,这样也能写出1px边框,优点,如果用less或者sass,可以定义成公用的,引用方便,缺点:换颜色要换图片
1.
html部分
<div class="border">测试0.5px边框</div>
css部分
.border{
position: relative;
color: #555;
font-size: 14px;
line-height: 41px;
width:200px;
}
.border:after{
height: 1px;
content: '';
width: 100%;
border-bottom: 1px solid #e8e8e8;
position: absolute;
bottom: -1px;
right: 0;
transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
z-index: 10;
}
用添加伪元素的方法添加下边框,再利用transform在y轴缩小1倍
2.
.border{
width:200px;
color: #555;
font-size: 14px;
line-height: 41px;
border-bottom: 1px solid transparent !important;
-webkit-border-image: url("../img/line-bottom.png") 2 0 stretch;
border-image: url("../img/line-bottom.png") 2 0 stretch;
-o-border-image: url("../img/line-bottom.png") 2 0 stretch;
-moz-border-image: url("../img/line-bottom.png") 2 0 stretch;
border-width: 0 0 1px;
}
line-bottom.png 是宽1px 高2px的小图片,1px透明,1px用border的颜色,这样也能写出1px边框,优点,如果用less或者sass,可以定义成公用的,引用方便,缺点:换颜色要换图片
相关文章推荐
- 0.5px边框,css及sass
- css给div添加0.5px的边框
- css3写出0.5px的边框
- css细节复习笔记——内边距、边框和外边距
- CSS的table的实现,实现表格的单行边框显示,换行显示效果
- css复习----边框border day1
- 纯CSS无图实现DIV边框平滑阴影
- css模拟select设置高度在ie67下有效(也可作为去除边框)
- css-方形边框四角
- 表格细边框css
- DIV+CSS实例虚线边框|CSS虚线下划线及虚线用应
- DIV+CSS圆角边框
- 无边框web主窗口(powerbuilder11 web应用中修改xp.cc,classic.css)
- css 链接变颜色 (加边框设置样式)
- css实现可扩展的图片背景圆角边框,在IE6,IE7,Firefox下通过测试
- 写出边框的倒三角形
- CSS实现自适应的图片背景边框代码
- DIV+CSS圆角边框
- 5种方法立刻写出更好的CSS代码
- CSS Border(边框)