最近写移动端页面写的比较多，边边基本上都是用的1px，视觉上也确实有点小粗，这不闲下来啦，具体的研究了下0.5px是怎么实现的，切记，这个效果只有在手机上才能看到效果的

利用了css3的缩放效果

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>0.5px</title>

</head>

<style>

	.content{

   		position:relative;

   		width: 200px;

   		height: 200px;

   		background: #eee;

	}

	.content:before{

		content: '';

		position: absolute;

		width: 200%;

		height: 1px;

		bottom: 0;

		border-bottom: 1px solid red;

		-webkit-transform-origin: 0 0;

		transform-origin: 0 0;

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

		transform: scale(.5,.5);

		-webkit-box-sizing: border-box;

		box-sizing: border-box

	}

	.bd-all{

	  position:relative;

	  margin-top: 10px;

	}

	.bd-all:after{

	  content: "  ";

	  position: absolute;

	  left: 0;

	  top: 0;

	  z-index:-1;

	  width: 200%;

	  height:200%;

	  border:1px solid #e0e0e0;

	  -webkit-transform-origin: 0 0;

	  transform-origin: 0 0;

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

	  transform: scale(.5, .5);

	}

</style>

<body>

	<div class="content"></div>

<!-- 四周都是0.5px的 -->

	<div class='bd-all'>你好</div>

</body>

</html>

　　如有错误之处，请评论中之出，谢谢指出错误的亲们

欢迎加入前端开发交流群：qq：143206839

移动端的0.5px的更多相关文章

  1. 移动端页面0.5px border的实现

    移动端上经常发现1px边框异常的粗,因此,决定用伪类配合css3来实现0.5px边框 代码如下: <!doctype html> <html lang="en"& ...

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

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

  3. 移动端安卓手机不能识别border 0.5px解决方案

    由于安卓手机无法识别border 0.5px,因此我们要用0.5px的话必须要借助css3中的-webkit-transform:scale缩放来实现, 原理:将伪元素的宽设为200%,height设 ...

  4. 移动端 Retina屏border实现0.5px

    首先来看一下造成Retina边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRat ...

  5. css写出0.5px边框（一）

    在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...

  6. div背景透明内容不透明与0.5PX边框兼容设置

    1.问题:设置 border-width:0.5px;  并兼容安卓和苹果移动端.  兼容:苹果IOS的 safari 支持浮点数边框,安卓浏览器不支持,会四舍五入到1px.不同浏览器效果额不同  解 ...

  7. CSS3实现0.5px的边框

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

  8. CSS3实现0.5px边框

    用CSS设置边框宽度为0.5px,可以使边框看起来更加细腻,特别是在移动端,设计师会有这样的要求. 但遗憾的是,大多数Android手机并不能识别0.5px.因此我们可以使用CSS3来变通的实现0.5 ...

  9. 怎么画一条0.5px的边

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

随机推荐

  1. [luogu2679] 子串 (多维dp)

    传送门 Description 有两个仅包含小写英文字母的字符串 A 和 B . 现在要从字符串 A 中取出 k 个互不重叠的非空子串,然后把这 k 个子串按照其在字符串 A 中出现的顺序依次连接起来 ...

  2. JAVA关键技术

    通用技术方面 MVC 1)概念 MVC是一个架构模式,它分离了表现与交互.它被分为三个核心部件:模型-model.视图-view.控制器-controller 2)工作原理 所有的终端用户请求被发送到 ...

  3. JavaScript对接百度地图api实现地图标点功能

    粗略的做了个地图标点功能 首先,去百度注册开发者账号,然后进入到百度地图开放平台 进入到控制台, 创建浏览器端应用,给个安全域名 然后去开发者文档JavaScript里面找地图展示文档,直接怼上去就行 ...

  4. Mycat连接数据库之后导致表名全小写的问题分析研究

    初步研究:通过部署发现在Mycat中部署逻辑表表名大小写混合时,在Mycat连接后出现全变小.容易造成错误逻辑表(按混合表名创建物理表): 可能拯救的方法: 1.Linux下部署安装MySQL,默认不 ...

  5. 【android】uses-permission和permission具体解释

    1.<uses-permission>: 官方描写叙述: If an application needs access to a feature protected by a permis ...

  6. 【solr基础教程之中的一个】Solr相关知识点串讲

           Solr是Apache Lucene的一个子项目.Lucene为全文搜索功能提供了完备的API.但它仅仅作为一个API库存在.而不能直接用于搜索. 因此,Solr基于Lucene构建了一 ...

  7. bzoj2878 [Noi2012]迷失游乐园 [树形dp]

    Description 放假了,小Z认为呆在家里特别无聊.于是决定一个人去游乐园玩. 进入游乐园后.小Z看了看游乐园的地图,发现能够将游乐园抽象成有n个景点.m条道路的无向连通图,且该图中至多有一个环 ...

  8. 虚拟机window7与主机之间文件复制设置

    一.需要安装VMware Tools 选中虚拟机>虚拟机>安装VMware Tools 一直点击下一步直至完成 二.设置文件共享 选定实体机需要共享给虚拟机的文件夹,并为该共享起一个名称. ...

  9. 微信企业号回调模式配置解说 Java Servlet+Struts2版本号 echostr校验失败解决

    微信企业号回调模式配置解说 Java Servlet+Struts2版本号 echostr校验失败解决 echostr校验失败,请您检查是否正确解密并输出明文echostr 异常java.securi ...

  10. ROS探索总结（十九）——怎样配置机器人的导航功能

    1.概述 ROS的二维导航功能包.简单来说.就是依据输入的里程计等传感器的信息流和机器人的全局位置,通过导航算法,计算得出安全可靠的机器人速度控制指令. 可是,怎样在特定的机器人上实现导航功能包的功能 ...