css实现0.5像素的边框
公司的设计师在做设计图的时候都是以iphone6(宽为750物理像素)为基准进行设计的。iphone6的设备像素比(即css像素与物理像素的比例)是2,所以设计师在设计图画了边框为1px的box的时候,相对于css代码来说就是0.5像素。
对于这个问题,最直观的方法就是css直接设置边框为0.5px,经过测试,iPhone可以正常显示,android下几乎所有的浏览器都会把0.5识别为0,即无边框状态,所以这种方式行不通
CSS3有缩放的属性,我们可以利用这个属性,缩小50%的1px的边框,来实现这个功能,具体实现代码如下
<div class="border3">
<div class="content">伪类设置的边框</div>
</div>
css:
.border3{
position: relative;
} .border3:before{
content: '';
position: absolute;
width: 200%;
height: 200%;
border: 1px solid red;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-o-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
实现思路:
1、设定目标元素的参考位置
2、给目标元素添加一个伪元素before或者after,并设置绝对定位
3、给伪元素添加1px的边框
4、用box-sizing: border-box 属性把边框都包进宽和高里面
5、宽和高设置为 200%
6、整个盒子模型缩小为0.5
7、调整盒子模型的位置,以左上角为基准 transform-origin: 0 0;
实现结果在iphone显示如下:
css实现0.5像素的边框的更多相关文章
- css实现0.5像素的底边框。
由于设计图的1px在移动端开发中的像素比是2倍,在实际开发中却是需要1px的线条,虽然最直接的方式是将线条设置为0.5px,但有些移动端对于0.5px的解析为0,变成了无边框的显示.因此处理该需求我们 ...
- css实现0.5像素
.border{ position: relative; } .border:before{ content: ''; position: absolute; width: 200%; height: ...
- css如何让表格table的边框为1像素呢
在Html中使用table是网页制作中必不可缺的一部分,如果直接给css设置table里面的td边框为1像素的话,那么实际我们从网页上看到的效果却不是1像素. 那么我们怎么用css让table的边框为 ...
- [转]CSS如何设置html table表格边框样式
原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...
- css 使用background背景实现border边框效果
css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...
- 用css样式,为表格加入边框
Table 表格在没有添加 css 样式之前,是没有边框的.这样不便于我们后期合并单元格知识点的讲解,所以在这一节中我们为表格添加一些样式,为它添加边框. 在右侧代码编辑器中添加如下代码: <s ...
- CSS,点击去除虚线边框代码
- 解决CSS图片底部3像素问题总结
解决三像素问题的总结: 1.img标签的父标签增加font-size:0; 如.body{ font-size: 0; } 2.img标签增加display:block; img{display:bl ...
- 3.纯 CSS 创作一个容器厚条纹边框特效
原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...
随机推荐
- Struct2笔记②--完善登陆代码
上节课的代码 写完整 登陆成功在页面上显示用户名和密码: username:${requestScope.username }<br> password:${requestScope. ...
- shiro+springmvc 都使用缓存
基于涛哥shiro案例16 的这时候要配置service方法的缓存 在spring-config.xml添加 <context:annotation-config /> <cache ...
- iOS成长之路-使用系统默认声音、震动
导入框架 代码片段 apple系统默认声音名称说明: 1.声音格式是MP3或m4r的需要转成caf格式(可先转成aif , aiff,然后修改后缀) 2.路径在/System/Library/Audi ...
- 处理编译错误"0" is an invalid value for the "DebugInformation" parameter of the "DCC" task.
在安装一个从XE6复制到XE4的控件时出现编译错误: [MSBuild Error] "0" is an invalid value for the "DebugInfo ...
- HBase 架构与工作原理3 - HBase 读写与删除原理
本文系转载,如有侵权,请联系我:likui0913@gmail.com 一.前言 在 HBase 中,Region 是有效性和分布的基本单位,这通常也是我们在维护时能直接操作的最小单位.比如当一个集群 ...
- From 易水寒 格局越大 人生越宽
有这么一则故事:三个泥瓦匠在砌墙,一个人走过来,问他们在干什么. 第一个泥瓦匠没好气地说,你没看见吗?我在辛苦地砌墙呢.第二个回答,我们正在建一座高楼.第三个则洋溢着喜悦说,我们正在创造美好生活. 1 ...
- 能把opencv的源码也进行调试吗?(需要pdb文件才行)
能把opencv的源码也进行调试吗?(需要pdb文件才行)1.我是用的Qt Creator,然后"工具\选项\调试器\概要\源码路径映射"中,选择"添加Qt源码" ...
- Centos/Fedora下安装Twisted,failed with error code 1 in /tmp/pip-build-H1bj8E/twisted/解决方法
Python踩坑之路 pip/easy_install无法安装Twisted或者安装后无法导入Twisted 看到MM网站上很多图,想用Scrapy框架爬点图,遇到各种库的问题,蛋疼. 一直twist ...
- vector(char*)和vector(string)
vector<char*> ch; vector<string> str; for(int i=0;i<5;i++) { char *c=fun1();//通过这个语句产 ...
- 时空KSOA之CS表单工具说明
CS表单工具说明 1.调用: 1.1.单据事件调用 runbill_表单sn 调用无窗口表单 loadbill_表单sn 调用窗口表单 1.2.功能调用 功能号:LOADCSBILL 参数表单名称 1 ...