移动端边框1px的实现
查看京东的移动端1px实现原理,用的是:after和css3的scale(0.5)缩放。
border-right
fr:after{
height:100%;
content:' ';
width:1px;
border-right:1px solid #f0f0f0;
position:absolute;
top:0;
right:-1px;
transform:scaleX(0.5);
-webkit-transform:scaleX(0.5);
z-index:10;
}
border-bottom
.bottom:after {
height: 1px;
content: '';
width: 100%;
border-top: 1px solid #f0f0f0;
position: absolute;
bottom: -1px;
right:;
transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
z-index:;
}
文字两侧加横线
.gray-text:after {
content: "";
height: 1px;
width: 100%;
position: absolute;
top: 50%;
left:;
background-color: #cbcbcb;
-webkit-transform: scaleY(.5);
}
.gray-text:after {
margin-top: -0.5px;
}
移动端边框1px的实现的更多相关文章
- 移动端 CSS 1px 问题及解决方案
移动端 CSS 1px 问题及解决方案 viewport & transfrom: scale viewport 的 initial-scale 设为 1 UI 设计稿用rem 和 trans ...
- 移动端的1px边框问题
最近在做一个移动端项目,涉及到1像素问题 其实质就是移动端的css里写1px,看起来比1px粗,这就是物理像素和逻辑像素的区别.物理像素和逻辑像素之间存在一个比例关系,在Javascript中可以用w ...
- 在移动端实现1px的边框
由于分辨率 DPI 的差异,高清手机屏上的 1px 实际上是由 2×2 个像素点来渲染,有的屏幕甚至用到了 3×3 个像素点 所以 border: 1px 在移动端会渲染为 2px 的边框 与设计图产 ...
- css移动端适配 1px边框的解决方案
.border{ width: 100px; height: 100px; position: relative; } //加上媒体查询更严谨一些 dpr为2的设配才进行缩放,dpr为1的设备边框就是 ...
- 移动端实1px细线方法
前言 在移动端中,宽度100%,1px的线看起来要比pc端中宽度100%,1px的线粗, 那是因为css中的1px并不等于移动设备(物理像素)的1px.物理像素显示是1个像素代表2个像素,所以出现为2 ...
- 移动端比1px还小的border
巧用border 在移动端 经常出现border,细边框但有的时候 产品大大1px甚至乎会觉得不够细那么要如何写出比1px还要小的border下面是代码 希望对大家有所帮助 .thinner-bord ...
- table边框1px
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 在vue项目中使用stylus来实现移动端的1px
1.目录结构(vue项目,但是并不局限于vue) 2.首先定义一个mixin.styl文件 border-1px($color) position: relative &:after disp ...
- stylus 移动端边框1像素问题解决方案
border($border-width = 1px, $border-color = #ccc, $border-style = solid, $radius = 0) // 为边框位置提供定位参考 ...
随机推荐
- 十六进制字节 & 十六进制转二进制
做项目也将近一年的时间了.从一开始就经常提到“一个十六进制字节”,然而一开始就是迷惑的,直到现在. 一个十六进制字节,比如:FF.周围的人经常说这是一个十六进制字节.然后我就想,这不是两个字符 ...
- excel 批量替换换行符
在excel批量替换换行符操作步骤: 全选需要查找换行符的范围 CTRL+H调出查找和替换 在查找内容内输入"ctrl+enter"两个组合键 点击查找全部即可. 在excel中输 ...
- python--面向对象编程介绍
暂不考虑开发场地等复杂的东西,我们先从人物角色下手, 角色很简单,就俩个,恐怖份子.警察,他们除了角色不同,其它基本都 一样,每个人都有生命值.武器等. 咱们先用非OOP的方式写出游戏的基本角色 引子 ...
- LOG4J.PROPERTIES配置详解(转载)
Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息.通过配置,可以创建出Log4J的运行环境 ...
- ASP.NET 批量更新
ASP.NET三种常用批量操作: 一.SqlBulkCopy copy = new SqlBulkCopy("");(优先考虑 性能最优) SqlBulkCopy可以将一个Data ...
- Android读取RAM,ROM,SD卡容量
1)简介 一般人们在买手机的时候,在手机配置上都会出现"内存容量:512MB ROM+512MB RAM "等等类似这样的说明,可能很多人都知道RAM的意思就是运存的意思,但是对于 ...
- iOS - UI - UIWebView
1.UIWebView UIWebView 是 苹果提供的用来展示网页的UI控件.它也是最占内存的控件. iOS8.0 webkit框架. WKWebView,相比UIWebView,节省了1/3~1 ...
- iOS - UI - UITableView
1.UITableView 表格视图 服从数据源 - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSIn ...
- javascript 编程技巧
1.巧用判断: 在js中,NaN,undefined,Null,0,"" 在转换为bool的时候,是false,所以,可以这样写. if(!obj) {} 表示一个对象如果为fal ...
- 剑指Offer26 字符串的全排列
/************************************************************************* > File Name: 26_String ...