0.5px的实现的几种方法
方法一
通过css3缩放
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<title>.5px的实现</title>
<style type="text/css">
body{padding: 50px;-webkit-touch-callout:none;}
[class*="btn"]{margin: 0 auto;}
.btn{
width: 200px;
height: 42px;
line-height: 42px;
border-radius: 5px;
text-align: center;
background-color: #EDEDED;
}
.btn1 {
border: 1px solid red;
}
.btn2 {
position: relative;
}
.btn2:before {
content: '';
position: absolute;
border: 1px solid red;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
transform: scale(0.5);
border-radius: 10px;
}
</style>
</script>
</head> <body>
<div class="btn btn1">1px border</div>
<br/><br/>
<div class="btn btn2">.5px border</div>
</body> </html>
方法二
border: 0.5px solid red;//ios8以上支持，以下显示为0
方法三
渐变模拟：设置 1px 通过 css 实现的背景图片，50%有颜色，50%透明。
.border {
background-image:linear-gradient(180deg, red, red 50%, transparent 50%), linear-gradient(270deg, red, red 50%, transparent 50%), linear-gradient(0deg, red, red 50%, transparent 50%), linear-gradient(90deg, red, red 50%, transparent 50%);
background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
background-repeat: no-repeat;
background-position: top, right top, bottom, left top;
padding: 10px;
}
优点：兼容性较好，单边框、多边框可实现，大小、颜色可配置。
缺点：代码量多、无法实现圆角、同时占用了背景样式
方法四
-webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);//利用 css 对阴影处理的方式模拟。
优点：兼容性较好，单边框、多边框、圆角可实现，大小、颜色、可配置。
缺点：模拟效果强差人意，颜色不好配置。
方法五
0.5px的实现的几种方法的更多相关文章
- RHEL7.0 配置网络IP的三种方法
导读 RHEL7里面的网卡命名方式从eth0,1,2的方式变成了enoXXXXX的格式. en代表的是enthernet (以太网),o 代表的是onboard (内置),那一串数字是主板的某种索引编 ...
- opencv 3.1.0 访问像素值的三种方法（C++）
三种方法分别问: 指针访问:void colorReduce_ptr(cv::Mat &inputImage, cv::Mat &outputImage, int div); 迭代器访 ...
- 在红帽RHEL7.0里配置网卡的四种方法
第一种方法 :采用vim编辑器来配置: 1. 如下图的步骤所示: 2. 输入这个命令后进行配置成下方图片里的内容: 3. 然后退出vim 编辑器,然后重新启动一下网络服务配置: 4.这些配置完后 ...
- 怎么画一条0.5px的边
编者按:本文由人人网FED发表于掘金,并已授权奇舞周刊转载 什么是像素? 像素是屏幕显示最小的单位,在一个1080p的屏幕上,它的像素数量是1920 1080,即横边有1920个像素,而竖边为1080 ...
- 对0.5px的边的研究--------------引用
什么是像素? 像素是屏幕显示最小的单位,在一个1080p的屏幕上,它的像素数量是1920 1080,即横边有1920个像素,而竖边为1080个.一个像素就是一个单位色块,是由rgba四个通道混合而成. ...
- 怎么在高清屏上画一条0.5px的边
怎么在高清屏上画一条0.5px的边呢?0.5px相当于高清屏物理像素的1px.这样的目的是在高清屏上看起来会更细一点,效果会更好一点,例如更细的分隔线. 理论上px的最小单位是1,但是会有几个特例,高 ...
- 分析python程序运行时间的几种方法
最早见过手写的,类似于下面这种: 1 import datetime 2 3 def time_1(): 4 begin = datetime.datetime.now() 5 sum = 0 6 f ...
- 给tabBar设置图片和字体颜色的几种方法
现在很多应用都使用到了tabBar,我们往往在给tabBar设置图片和字体的时候,当选中状态下,往往字体的颜色和图片的颜色不匹配,有时候就显得无从下手,我也常常忘了,所有写这个博客的目的,相当于给自己 ...
- 函数语法：原生js判断某个元素是否有指定的class名的几种方法
var aLi = document.querySelectorAll('#tabs li'); for(var i = 0;i <p.length;i++){ //第一种方法,用classLi ...
随机推荐
- Oracle 中for update和for update nowait的区别
http://www.cnblogs.com/quanweiru/archive/2012/11/09/2762223.html 1.for update 和 for update nowait 的区 ...
- 提升Web性能的技巧
1. 采用反向代理服务器(Reverse Proxy Server)来对应用进行加速和保护 其作用主要在以下三方面: 负载平衡 – 运行在反向代理服务器上的负载平衡器会在不同的不服务器 间进行传输 ...
- OpenGL研究3.0 多边形区域填充
OpenGL研究3.0 多边形区域填充 DionysosLai(906391500@qq.com)2014-06-22 所谓多边形区域填充.就是将多边形内部区域,所有已相同色块填充.注意:这里讨论的多 ...
- hdu 1203 I NEED A OFFER!（01背包）
题意:"至少一份offer的最大概率".即求拿不到offer的最小概率 (得到offer的最大概率 = 1 - 反例的最小概率). 状态转移方程:dp[j]= Min(dp[j], ...
- python中strip()函数的理解
1.strip()函数 函数原型 声明:s为字符串.rm为要删除的字符序列 s.strip(rm) :删除s字符串中开头.结尾处.位于 rm删除序列的字符 s.lstrip(rm) :删除s字符串中开 ...
- Asp.Net北大青鸟总结(四)-使用GridView实现真假分页
这段时间看完了asp.net视频.可是感觉到自己的学习好像没有巩固好,于是又在图书馆里借了几本关于asp.net的书感觉真的非常好自己大概对于asp.net可以实现主要的小Demo.可是我知道仅仅有真 ...
- TOML简介 （转）
TOML的由来 配置文件的使用由来已久,从.ini.XML.JSON.YAML再到TOML,语言的表达能力越来越强,同时书写便捷性也在不断提升. TOML是前GitHub CEO, Tom Prest ...
- kaptcha的和springboot一起使用的简单例子
https://blog.csdn.net/xiaoyu19910321/article/details/79296030
- spring AOP(切面) 表达式介绍
在 spring AOP(切面) 例子基础上对表达式进行介绍 1.添加接口删除方法 2.接口实现类 UserDaoServer 添加实现接口删除方法 3.测试类调用delUser方法 4. 输出结果截 ...
- authority分层