实现.5px的线条

网络上有很多方法，如设置viewport，box-shawdow，border-image，background-image，transform:scale等，这里不做介绍(百度或者谷歌“retina 1px 边框”有答案)，本文只介绍一种觉得比较好用的方法，一来兼容性好，二来不依赖图片。

transform:scale(x,y)

通过css支持定义border或者height为.5px大的线条，在android设备中的无法显示出来，这里有个小技巧，果设置线条为1px，然后通过transform:scale(x,y)来缩放线条为原来的一半，可显示0.5px的线条。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport">

<meta content="yes" name="apple-mobile-web-app-capable">

<meta content="black" name="apple-mobile-web-app-status-bar-style">

<meta content="telephone=no" name="format-detection">

<meta content="email=no" name="format-detection">

<title>点5测试 - scale</title>

<style type="text/css">

.line {

    height: 50px;

    line-height: 50px;

    background-color: #CCC;

    border-bottom:1px solid red

} 

.scale {

    position: relative;

    height: 50px;

    line-height: 50px;

    background-color: #CCC

}

.scale:after {

    position: absolute;

    content: '';

    width: 100%;

    left: 0;

    bottom: 0;

    height: 1px;

    background-color: red;

    -webkit-transform: scale(1,.5);

    transform: scale(1,.5);

    -webkit-transform-origin: center bottom;

    transform-origin: center bottom

}

</style>

</head>

<body>

<div class="line">1px</div>

<br/><br/>

<div class="scale">0.5px</div>

</body>

</html>

http://peunzhang.github.io/demo/d5px/height-scale.html

实现.5px的圆角边框

.5px的边框，看起来看神奇，这里感谢蓝叔提供的方法。

原理：先定义1px的圆角边框，然后拉伸内容的宽度和高度为父级的2倍(边框厚度不变)，然后再使用transform:scale(0.5)缩放为原来的0.5倍

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport">

<meta content="yes" name="apple-mobile-web-app-capable">

<meta content="black" name="apple-mobile-web-app-status-bar-style">

<meta content="telephone=no" name="format-detection">

<meta content="email=no" name="format-detection">

<title>点5测试 - border-radius</title>

<style type="text/css">

body{padding: 50px;-webkit-touch-callout:none;}

[class*="btn"]{margin: 0 auto;}

.btn-1 {

    width: 200px;

    height: 42px;

    -webkit-border-radius: 5px;

    border-radius: 5px;

    text-align: center;

    line-height: 42px;

    background-color: #EDEDED;

    border: 1px solid red;

}

.btn {

    position: relative;

    width: 200px;

    height: 42px;

    -webkit-border-radius: 5px;

    border-radius: 5px;

    text-align: center;

    line-height: 42px;

    background-color: #EDEDED;

}

.btn:before {

    content: '';

    position: absolute;

    top: -50%;

    bottom: -50%;

    left: -50%;

    right: -50%;

    -webkit-transform: scale(0.5);

    transform: scale(0.5);

    border-style: solid;

    border-width: 1px;

    border-color: red;

    -webkit-border-radius: 10px;

    border-radius: 10px;

}

</style>

</script>

</head>

<body>

<div class="btn-1">1px border</div>

<br/><br/>

<div class="btn">.5px border</div>

</body>

</html>

http://1.peunzhang.sinaapp.com/demo/d5px/border-radius.html

如果你在chrome打开，会发现缩放线条会导致边框颜色变浅，但大家可以放心使用，因为在大部分移动设备(相对高端)的颜色还是正常的。

如何实现.5px的线条和.5px的圆角边框的更多相关文章

  1. 【原】移动web点5像素的秘密

    最近和一个朋友聊天,朋友吐露了工作上的一些不开心,说自己总是喜欢跟别人比较,活得比较累,这种感觉大部分人经历过,往往觉得是自己心态不好,其实不然,这是人性,此时应该快速摆脱这种状态,想到DOTA大9神 ...

  2. 移动web点5像素的秘密

    最近和一个朋友聊天,朋友吐露了工作上的一些不开心,说自己总是喜欢跟别人比较,活得比较累,这种感觉大部分人经历过,往往觉得是自己心态不好,其实不然,这是人性,此时应该快速摆脱这种状态,想到DOTA大9神 ...

  3. 移动web点5像素的秘密（转）

    最近和一个朋友聊天,朋友吐露了工作上的一些不开心,说自己总是喜欢跟别人比较,活得比较累,这种感觉大部分人经历过,往往觉得是自己心态不好,其实不然,这是人性,此时应该快速摆脱这种状态,想到DOTA大9神 ...

  4. CSS3实现0.5px的边框

    前端页面细节处理好了才会显得精致.边框在网页中是常见的一种样式了.虽然不把它处理为0.5px看上去没毛病,但是想让你做的东西征服更多的人,这些细节处理是必须的. 今天主要说一下如何让边框显示0.5px ...

  5. .使用 HTML+CSS 实现如图布局，border-widht 5px，一个格子大小是 50*50，hover时候边框变为红色（兼容IE6+，考虑语义化的结构）

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  6. css3写出0.5px的边框

    一说到0.5px的边框,我们一般认为是不行的,因为在ps中0.5px的线也是做不出来的,这个计算机的像素有关系. 废话不多说了,0.5px 其实用的是css3新特性,box-shadow:阴影设置 代 ...

  7. 总结一下各种0.5px的线

    在PC端用1px的边框线,看起来还好,但在手机端看起来就很难看了,而0.5px的分割线会有种精致的感觉.用普通写法border:solid 0.5px red;iPhone可以正常显示,android ...

  8. [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)

    上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...

  9. UIKit和Core Graphics绘图（一）——字符串，线条，矩形，渐变

    概述 CoreGraphics也称为Quartz 2D 是UIKit下的主要绘图系统,频繁的用于绘制自定义视图.Core Graphics是高度集成于UIView和其他UIKit部分的.Core Gr ...

随机推荐

  1. JQuery EasyUI的常用组件

    jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件,该框架提供了创建网页所需的一切,帮助您轻松建立站点. 注:本次介绍的JQuery EasyUI版本为1.5版. 一 ...

  2. 使用ant自动构建apk

    最近因渠道过多,需要单独接入渠道支付sdk的渠道也很多,而首发在即.人手不足,所以着手了部分相关的工作,看了下目前的操作流程..无奈人比较懒,所以决定进行一波简化的技术,先考虑到了两种方案: 1)脚本 ...

  3. Luogu 1064 金明的预算方案 / CJOJ 1352 [NOIP2006] 金明的预算方案（动态规划）

    Luogu 1064 金明的预算方案 / CJOJ 1352 [NOIP2006] 金明的预算方案(动态规划) Description 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间金明自己 ...

  4. JAVA的高并发编程

    一.多线程的基本知识 1.1进程与线程的介绍 程序运行时在内存中分配自己独立的运行空间,就是进程 线程:它是位于进程中,负责当前进程中的某个具备独立运行资格的空间. 进程是负责整个程序的运行,而线程是 ...

  5. 解决win10注册错误 错误代码0x8002801c

    使用win10的过程中经常碰到各种注册错误,让人抓狂!!! 现在分享一个完美的解决方法(非原创): 最简洁的办法是:1.自行将msinet.ocx(win10系统64位)组件复制到C:\Windows ...

  6. Protobuf动态解析在Java中的应用 包含例子程序

    最近在做ProtoBuf相关的项目,其中用到了动态解析,网上看了下相关资料和博文都比较少,自己来写一个记录一下学习过程.   Protocol Buffers是结构化数据格式标准,提供序列化和反序列方 ...

  7. vs2015数据驱动的单元测试

    今天在做测试的时候boss让我这个菜鸟做vs2015下c#的单元测试,并且给了我参考http://www.cnblogs.com/kingmoon/archive/2011/05/13/2045278 ...

  8. 教你做炫酷的碎片式图片切换 (canvas)

    前言 老规矩,先上 DEMO 和 源码.图片区域是可以点击的,动画会从点击的位置开始发生. 本来这个效果是我3年前做的,只是当是是用无数个 div 标签完成的,性能比较成问题,在移动端完全跑不动.最近 ...

  9. （转）log4j（三）——如何控制不同级别的日志信息的输出？

    一:测试环境与log4j(一)——为什么要使用log4j?一样,这里不再重述 1 老规矩,先来个栗子,然后再聊聊感受 package test.log4j.test3; import org.apac ...

  10. （转）Oracle中的rownum,ROWID的 用法

    场景:在书写oracle的sql语句时候,如果语句不存在主键,需要删除几条重复的记录,这个时候如果不知道oracle中的伪列,就需要把所有的重复记录先删除,再插入.这样做好麻烦,可以通过伪列来定位记录 ...