实现.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. gulp实用配置（2）——中小项目

    上一篇的gulp配置很简单,主要就是为了demo的查看和调试,这一篇则会相对详细一些,包括压缩合并打时间戳等. 在互联网环境比较好的城市,需要多人协作的,大一点的项目应该都用上了模块化(这里主要指co ...

  2. oh-my-zsh配置

    oh-my-zsh是做什么的 开源的zsh配置工具,它的主题和插件系统可以为zsh扩展外观和很多有用的功能,官方是这样介绍的: Oh-My-Zsh is an open source, communi ...

  3. 从源码的角度看Service是如何启动的

    欢迎访问我的个人博客 ,原文链接:http://wensibo.top/2017/07/16/service/ ,未经允许不得转载! 七月中旬了,大家的实习有着落了吗?秋招又准备的怎么样了呢?我依旧在 ...

  4. 实时音视频互动系列（下）：基于 WebRTC 技术的实战解析

    在 WebRTC 项目中,又拍云团队做到了覆盖系统全局,保证项目进程流畅.这牵涉到主要三大块技术点: 网络端.服务端的开发和传输算法 WebRTC 协议中牵扯到服务端的应用协议和信令服务 客户端iOS ...

  5. redhat mysql安装配置

    1.    下载好编译包, 解压到/usr/local/ 并修改文件夹名字为mysql tar -zxf mysql-5.6.30-linux-glibc2.5-x86_64.tar.gz -C /u ...

  6. poj_1845: Sumdiv

    题目链接 先将A^B分解质因数,可以通过先分解A,再把对应的幂次*B.之后用下面这个式子求解就可以了 #include<vector> #include<iostream> u ...

  7. ajax-post请求

    一般来说字符串读取不出来查看下面这行代码是否加上: xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencode ...

  8. 回味Python2.7——笔记3

    一.错误和异常 1.异常处理 >>> while True: ... try: ... x = int(raw_input("Please enter a number: ...

  9. tensorflow Sigmoid 应用

    1.函数 函数:f(z) = 1 / (1 + exp( − z)) 导数:f(z)' = f(z)(1 − f(z)) 2.tensorflow实现 #!/usr/bin/env python # ...

  10. （转）VmWare下安装CentOS7图文安装教程

    场景:克服安装Linux的恐惧,想装就装.在一篇博客中看到的,很有借鉴意义   欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源 ...