时间:2021-05-08
【内容】:
1.利用background-image 渐变样式
2.可以利用scale缩放
3.给伪元素设置边框
在这里插入代码片<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>0.5px线实现方法</title> <style type="text/css"> .b1{ height: 40px; border: 1px solid #ff0000; } .a1{ height: 1px; margin-top: 20px; background-image: linear-gradient(0deg, #f00 50%, transparent 50%); } .a2{ height: 1px; margin-top: 20px; background-color: #f00; -webkit-transform: scaleY(.5); transform:scaleY(.5); } .scale-half { margin-top: 20px; height: 100px; border:1px solid #f00; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(.5, .5); transform: scale(.5, .5); } .border3{ position: relative; } .border3:before{ content: ''; position: absolute; width: 200%; height: 200%; border: 1px solid blue; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(.5, .5); -ms-transform: scale(.5, .5); -o-transform: scale(.5, .5); transform: scale(.5, .5); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } </style></head><body><div class="b1">正常1px边框</div><div class="a1"></div><div class="a2"></div><div class="scale-half"></div><div class="border3"> <div class="content">伪类设置的边框</div></div></body></html>到此这篇关于css实现0.5px线条解决移动端兼容问题(推荐)的文章就介绍到这了,更多相关css实现0.5px线条内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
由于安卓手机无法识别border:0.5px,因此我们要用0.5px的话必须要借助css3中的-webkit-transform:scale缩放来实现。原理:将
AndroidsetButtonDrawable()的兼容问题解决办法setButtonDrawable()的兼容问题API16实现/***Settheback
Webapp中的CSS3实现0.5px的细线感觉很长时间没写过博客了,最近生活还算稳定,过得较为充实,所以又要开始写写东西了,一个是为了做些记录,是怕自己某一天
关于网站建设方面的CSS+DIVHack兼容问题的讨论屏蔽IE浏览器(IE下不显示)ExampleSourceCode[]*:lang(zh)select{fo
浏览器的兼容问题突出。浏览器是最为重要的工具,基于DIV+CSS技术的网页设计的浏览器在兼容性问题上还存在诸多有待改进和提升的地方。由于DIV+CSS技术在浏览