首页 > 代码库 > 移动端实现边框0.5像素
移动端实现边框0.5像素
为了在移动端实现0.5像素的实线，以下是个人实践结果
1.通过background-image的渐变效果linear-gradient实现：
<p class="gradient">retina border-bottom 0.5px</p>
.gradient{ width: 200px; height: 20px; background-position: left bottom; background-image:linear-gradient(to bottom,transparent 50%,#000 50%); background-repeat: no-repeat; background-size: 100% 1px;}
效果图：
2.通过border-image的边框背景图实现
<p class="gradient">retina border 0.5px</p>
.gradient{ width: 240px; height: 20px; border:1px solid #ddd; border-image: url(data:image/gif;base64,R0lGODlhBQAFAIABAN3d3f///yH5BAEAAAEALAAAAAAFAAUAAAIHhB9pGatnCgA7) 2 stretch; -webkit-border-image: url(data:image/gif;base64,R0lGODlhBQAFAIABAN3d3f///yH5BAEAAAEALAAAAAAFAAUAAAIHhB9pGatnCgA7) 2 stretch;}
效果图：
移动端实现边框0.5像素
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。