CSS3实现0.5px边框
用CSS设置边框宽度为0.5px,可以使边框看起来更加细腻,特别是在移动端,设计师会有这样的要求。
但遗憾的是,大多数Android手机并不能识别0.5px。因此我们可以使用CSS3来变通的实现0.5px的边框需求。
.content{
position:relative;
}
.content:before{
content: '';
position: absolute;
width: 200%;
height: 1px;
bottom: 0;
border-bottom: 1px solid #d6e4ed;
-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
}
大致原理是:通过CSS3插入一个伪元素,该元素宽度为父级2倍,高度为1px,然后通过css3缩放将其缩小一倍,从未实现一个0.5px的边框。
CSS3实现0.5px边框的更多相关文章
- CSS3实现0.5px的边框
前端页面细节处理好了才会显得精致.边框在网页中是常见的一种样式了.虽然不把它处理为0.5px看上去没毛病,但是想让你做的东西征服更多的人,这些细节处理是必须的. 今天主要说一下如何让边框显示0.5px ...
- css写出0.5px边框(一)
在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...
- 实现0.5px边框线
实现0.5px边框方法 方案一:利用渐变(原理:高度1px,背景渐变,一半有颜色,一半透明) CSS部分 .container { width: 500px; margin: 0px auto; } ...
- [转]retina屏下支持0.5px边框的情况
2014-12-31更新:截至到IOS8.1,safari仍不支持@supports待safari支持@supports, 就可以利用0.5px了! 2014-7-25更新:1. 修正dpr = 1. ...
- div背景透明内容不透明与0.5PX边框兼容设置
1.问题:设置 border-width:0.5px; 并兼容安卓和苹果移动端. 兼容:苹果IOS的 safari 支持浮点数边框,安卓浏览器不支持,会四舍五入到1px.不同浏览器效果额不同 解 ...
- 0.5px的边框
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 移动端页面0.5px border的实现
移动端上经常发现1px边框异常的粗,因此,决定用伪类配合css3来实现0.5px边框 代码如下: <!doctype html> <html lang="en"& ...
- 移动端 Retina屏border实现0.5px
首先来看一下造成Retina边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRat ...
- 总结一下各种0.5px的线
在PC端用1px的边框线,看起来还好,但在手机端看起来就很难看了,而0.5px的分割线会有种精致的感觉.用普通写法border:solid 0.5px red;iPhone可以正常显示,android ...
随机推荐
- js提取DOM属性和设置DOM属性值
<style type="text/css"> #div1{width:100px;height:100px;} #div2{background} </styl ...
- 关于时间排序在ios中失效的处理方法
上个月公司做项目的时候在列表排序的时候产品加了一个需求,通过点击量,发布时间,评论量进行筛选的一个需求. 一开始在电脑上测试基本没问题,然后我也就放下了这个按耐不住的小心脏,然后在完成所有模块后 sh ...
- 【CSP-S膜你考】 A
A 题面 对于给定的一个正整数n, 判断n是否能分成若干个正整数之和 (可以重复) , 其中每个正整数都能表示成两个质数乘积. 输入格式 第一行一个正整数 q,表示询问组数. 接下来 q 行,每行一个 ...
- 【树形DP】【P3177】[HAOI2015] 树上染色
Description 给定一棵 \(n\) 个点的带权树,要求选 \(k\) 个点染成黑色,剩下染成白色,最大化两两同色点之间的距离和. Limitations \(0 \leq k \leq n ...
- 使用webpack.optimize.CommonsChunkPlugin提供公共代码
在webpack4里使用webpack.optimize.CommonsChunkPlugin时,报错,webpack4删除了常用的 CommonsChunkPlugin ,提示我们用config.o ...
- 安装gerrit服务器
一.环境准备 1.Java环境 gerrit依赖,用于安装gerrit环境. 下载:jdk-7u79-linux-x64.tar.gz http://www.oracle.com/technetwor ...
- 在GitHub中创建目录
需求:假定我们需要在 Answer 目录下创建一个目录 [注]GitHub无法单独创建一个空目录,但是可以在创建一个文件的同时创建它的所属目录 1.点击进入所需的目录 Answer 2.点击“Crea ...
- golang gin框架设置静态目录
router := gin.Default() 第一个参数是api 第二个静态问价的文件夹相对目录 router.StaticFS("/data", http.Dir(" ...
- 【SCALA】2、驼峰,下划线互转
1.刚开始写scala,发现确实还是很不熟悉,api以及语法的使用都不是很简洁,这写出来跟java也没差多少... 献丑了 package spark /** * @ProjectName: cutt ...
- log4net自动删除日志文件
晚上关于删除的日志文件主要有 https://blog.csdn.net/hellolib/article/details/78316253, 其实我这里的实现方式和他差不多,不过我这里不用配置时间, ...