实现.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. 总结两种动态代理jdk代理和cglib代理

    动态代理 上篇文章讲了什么是代理模式,为什么用代理模式,从静态代理过渡到动态代理. 这里再简单总结一下 什么是代理模式,给某个对象提供一个代理对象,并由代理对象控制对于原对象的访问,即客户不直接操控原 ...

  2. JavaWeb 后端 <十一> 之 DBUtils 框架 （基本使用 结果集 事务处理 对表读取）

    一.数据库操作框架 1.ORM:Object Relation Mapping Hibernate:非常流行 JPA:Java Persistent API.ORM标准 MyBatis:2010年开始 ...

  3. css 定位属性position的使用方法实例-----一个层叠窗口

    运行结果: <!DOCTYPE html> <html> <head> <title>重叠样式窗口</title> <style ty ...

  4. 【干货】JS相关知识点总结

    一.获取元素方法 可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量.如下: 上面的语句,如果把j ...

  5. Java虚拟机：如何判定哪些对象可回收？

    版权声明:本文为博主原创文章,转载请注明出处,欢迎交流学习! 在堆内存中存放着Java程序中几乎所有的对象实例,堆内存的容量是有限的,Java虚拟机会对堆内存进行管理,回收已经"死去&quo ...

  6. 关于Mongo的一些坑

    和大多数人一样,从Mysql转到Mongo的过程中,思维上经历了很大的转变.下面来说几点我遇到的坑: 1.单文档16M 这个是最多人碰到的,我也碰到过,当然,幸好是因为操作有误,导致这种不正常的大量数 ...

  7. 使用vue+flask做全栈开发的全过程（实现前后端分离）

    花了几天的时间终于在本地把前后端跑通了,以一篇博客记录我这几天的心酸... 1.安装nodejs(自带npm,可能会出现版本错误,更新npm) 2.npm在国内下载时,可能会慢,所以建议要安装淘宝镜像 ...

  8. ASP.NET Core之跨平台的实时性能监控(2.健康检查)

    前言 上篇我们讲了如何使用App Metrics 做一个简单的APM监控,最后提到过健康检查这个东西. 这篇主要就是讲解健康检查的内容. 没看过上篇的,请移步:ASP.NET Core之跨平台的实时性 ...

  9. 关于阻止PROE联网的一些想法！

    前言:商业上使用盗版proe会被官方警告,官方是通过proe软件联网来获取你的ip地址,那他是怎么知道你是商业用途而不是个人(一般不会对个人的盗版行为进行警告)?这不难,应该是通过检测同一ip下有多台 ...

  10. 51nod_1639:绑鞋带

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1639 #include <bits/stdc++.h& ...