移动端1像素边框解决方案pixelborder.css

原创 卓卓亭亭兮 教程 插件文档 268阅读 2018-01-10 17:57:09 举报

pixelborder.css

解决移动端 1px 边框太粗的问题,实现真正意义上的 1 像素边框

网址:Github

演示地址:DEMO

解决移动端1px边框的方法有很多,常用的有一下几种:
1、利用 js 获取 devicePixelRatio,然后对 viewprot 进行缩放
2、利用 border-image 实现
3、利用 css3 渐变
4、:before, :after 与 transform

如果想了解上面的方法是怎么工作的,可以看看这个文章移动端 1px 细线解决方案总结

pixelborder.css 采用了上面提到的第4中方法:

为什么要采用这种方案呢?
1、可以做出所有类型的边框,包括圆角;
2、方便修改边框的颜色;

安装:

只需在页面中引入"pixelborder.css"文件即可。如:

<link rel="stylesheet" href="css/pixelborder.css" />

使用:

1、在需要显示为像素边框的标签上添加“pixel-border”属性;

2、pixel-border属性值可以设置为“left(显示左边框)”、“right(显示右边框)”、“top(显示上边框)”、“bottom(显示下边框)”、“level(显示上、下水平边框)”、“vertical(显示左、右竖直边框)”和“all(显示全部边框)”;

3、设置边框颜色:只需要在标签中设置“border-color”样式即可。

如:

[quote]<style>
.demo{ border-color:red} //设置边框颜色为红色
</style>

<body>
<p calss="demo" pixel-border="top">pixel-border="top"</p>
</body>[/quote]

需要注意 <input type="button"> 是没有 :before, :after 伪元素的.

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复