方法一

通过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 对阴影处理的方式模拟。

优点：兼容性较好，单边框、多边框、圆角可实现，大小、颜色、可配置。
缺点：模拟效果强差人意，颜色不好配置。

方法五

border-image: url() 2 0 stretch;
border-width: 0 0 1px;
缺点：图片边缘模糊，大小、颜色更改不灵活。

0.5px的实现的几种方法的更多相关文章

  1. RHEL7.0 配置网络IP的三种方法

    导读 RHEL7里面的网卡命名方式从eth0,1,2的方式变成了enoXXXXX的格式. en代表的是enthernet (以太网),o 代表的是onboard (内置),那一串数字是主板的某种索引编 ...

  2. opencv 3.1.0 访问像素值的三种方法（C++）

    三种方法分别问: 指针访问:void colorReduce_ptr(cv::Mat &inputImage, cv::Mat &outputImage, int div); 迭代器访 ...

  3. 在红帽RHEL7.0里配置网卡的四种方法

    第一种方法 :采用vim编辑器来配置: 1.  如下图的步骤所示: 2.  输入这个命令后进行配置成下方图片里的内容: 3.  然后退出vim 编辑器,然后重新启动一下网络服务配置: 4.这些配置完后 ...

  4. 怎么画一条0.5px的边

    编者按:本文由人人网FED发表于掘金,并已授权奇舞周刊转载 什么是像素? 像素是屏幕显示最小的单位,在一个1080p的屏幕上,它的像素数量是1920 1080,即横边有1920个像素,而竖边为1080 ...

  5. 对0.5px的边的研究--------------引用

    什么是像素? 像素是屏幕显示最小的单位,在一个1080p的屏幕上,它的像素数量是1920 1080,即横边有1920个像素,而竖边为1080个.一个像素就是一个单位色块,是由rgba四个通道混合而成. ...

  6. 怎么在高清屏上画一条0.5px的边

    怎么在高清屏上画一条0.5px的边呢?0.5px相当于高清屏物理像素的1px.这样的目的是在高清屏上看起来会更细一点,效果会更好一点,例如更细的分隔线. 理论上px的最小单位是1,但是会有几个特例,高 ...

  7. 分析python程序运行时间的几种方法

    最早见过手写的,类似于下面这种: 1 import datetime 2 3 def time_1(): 4 begin = datetime.datetime.now() 5 sum = 0 6 f ...

  8. 给tabBar设置图片和字体颜色的几种方法

    现在很多应用都使用到了tabBar,我们往往在给tabBar设置图片和字体的时候,当选中状态下,往往字体的颜色和图片的颜色不匹配,有时候就显得无从下手,我也常常忘了,所有写这个博客的目的,相当于给自己 ...

  9. 函数语法：原生js判断某个元素是否有指定的class名的几种方法

    var aLi = document.querySelectorAll('#tabs li'); for(var i = 0;i <p.length;i++){ //第一种方法,用classLi ...

随机推荐

  1. Java结束线程的三种方法

    线程属于一次性消耗品,在执行完run()方法之后线程便会正常结束了,线程结束后便会销毁,不能再次start,只能重新建立新的线程对象,但有时run()方法是永远不会结束的.例如在程序中使用线程进行So ...

  2. linux下压缩成zip文件解压zip文件

    linux  zip命令的基本用法是: zip [参数] [打包后的文件名] [打包的目录路径] linux  zip命令参数列表: -a     将文件转成ASCII模式 -F     尝试修复损坏 ...

  3. Ubuntu64位安装Adobe Reader 9.5.5

    Aodbe Reader在Linux下的效果比Foxit Reader(福昕阅读器)要好一些,尤其对于中文文档而言.本文介绍Adobe Reader在Ubuntu下的安装,文章<Ubuntu12 ...

  4. shader学习之一：Properties语义块支持的数据类型

    _Int ("Int",Int)=2为:变量名("面板显示的名称",数据类型) 对于Int,Float,Range这些数字类型的属性,默认值为单独的数字.对于贴 ...

  5. jquery 滚动效果插件

    1.css <style> .fl { float: left; } .slider0 img { display: block; width:100px; padding: 2px; } ...

  6. TP框架---thinkphp修改删除数据

    1.在控制器MainController里面写一个方法,调用Nation表中的数据. public function zhuyemian() { $n = D("Nation"); ...

  7. EasyPlayerPro RTMP播放器助力远程娃娃机直播抓娃娃技术方案

    远程娃娃机 目前市面上娃娃机的方案有很多种.核心的技术流程就是实现远程直播加上对娃娃机手臂的远程操作.其中最主要的技术还是视频直播方案,需要低延时,视频秒开等流媒体技术. 最简单的直播方案 视频直播方 ...

  8. EasyNVR+EasyDSS实现简单套路的RTMP、微信直播、录像、回放方案

    安防领域HLS直播问题探讨 近期外出交流比较多,在之前的一篇博客<一种流量成本节省60%以上的手机直播微信直播H5直播幼儿园直播方案>我们说到了一种模式,就是当我们在做最近火热的幼儿园直播 ...

  9. 创建node.js一个简单的应用实例

    在node.exe所在目录下,创建一个叫 server.js 的文件,并写入以下代码: //使用 require 指令来载入 http 模块 var http = require("http ...

  10. 【题解】NOI2015软件包管理器

    [题解][P2146 NOI2015]软件包管理器 实际上就是树链剖分板子题. 对于\(install\)操作,直接查询它到\(0\)节点有多少已经安装了的,再用总数减去它. 对于\(uninstal ...