今天遇到一个需求,画0.5px的线,查了以下资料,主要以scale方法为主。代码如下:

/*0.5px上边框*/
.half_top_border_before:before{
content: "";
position: absolute;
left:;
top:;
width: 100%;
height: 0.05rem;
background-color: #ececec;
transform: scaleY(0.5);
transform-origin: center top;
z-index:;
}

利用after和before的话好像只能画两条线,如果要画整个边框可以先画两倍长宽的边框在缩小到0.5。需要三条边框的话可以考虑在容器内建立三个容器表示边框线再缩小。

CSS画0.5px的线的更多相关文章

  1. 总结一下各种0.5px的线

    在PC端用1px的边框线,看起来还好,但在手机端看起来就很难看了,而0.5px的分割线会有种精致的感觉.用普通写法border:solid 0.5px red;iPhone可以正常显示,android ...

  2. 实现0.5px边框线

    实现0.5px边框方法 方案一:利用渐变(原理:高度1px,背景渐变,一半有颜色,一半透明) CSS部分 .container { width: 500px; margin: 0px auto; } ...

  3. 画一条0.5px的线

    通过伪类元素:after为其添加样式,用transform:scaleY令其在垂直方向缩小0.5倍 .div:after{ height: 1px; transform: scaleY(0.5); t ...

  4. css实现0.5px

    使用缩放来0.5来实现,注意兼容各种浏览器 .frz-list li:after { content: ''; position: absolute; bottom:; height: 1px; wi ...

  5. 怎么画一条0.5px的边

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

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

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

  7. 对0.5px的边的研究--------------引用

    什么是像素? 像素是屏幕显示最小的单位,在一个1080p的屏幕上,它的像素数量是1920 1080,即横边有1920个像素,而竖边为1080个.一个像素就是一个单位色块,是由rgba四个通道混合而成. ...

  8. css3写出0.5px的边框

    一说到0.5px的边框,我们一般认为是不行的,因为在ps中0.5px的线也是做不出来的,这个计算机的像素有关系. 废话不多说了,0.5px 其实用的是css3新特性,box-shadow:阴影设置 代 ...

  9. hairline!ios实现边框0.5px

    在2014WWDC上,Ted O’Connor提出了“retina hairlines”的解决方案,即在ratina屏幕上可以显示0.5px宽度的边框.他的方案是这样的: 1 Standard bor ...

随机推荐

  1. zookeeper安装小记

    做了5个节点,但是查看状态的时候,发现 ./zkServer.sh statusJMX enabled by defaultUsing config: /opt/zookeeper/bin/../co ...

  2. Redis---Hash(字典)

    1. 概述 Redis hash 是一个string类型的field和value的映射表,hash特别适合用于存储对象. Redis 中每个 hash 可以存储 232 - 1 键值对(40多亿). ...

  3. DevOps - CI - SVN

    SVN http://tortoisesvn.net/ 支持文档:http://tortoisesvn.net/support.html 在线TortoiseSVN 中文文档:http://torto ...

  4. 主成分分析(PCA)原理详解(转载)

    一.PCA简介 1. 相关背景 上完陈恩红老师的<机器学习与知识发现>和季海波老师的<矩阵代数>两门课之后,颇有体会.最近在做主成分分析和奇异值分解方面的项目,所以记录一下心得 ...

  5. Gen对于数组Array的处理

    举个例子,如下: public void t() { String[][] a = new String[][] { { "x", "y" } }; Strin ...

  6. asp.net调用js方法

    C#前台js调用后台代码 前台js <script type="text/javascript" language="javascript"> fu ...

  7. SVN Hooks的介绍及使用

    阅读此篇文章你可以: 对SVN Hooks有一定的了解 获取两个最常用的SVN Hooks案例 SVN hooks介绍 Hooks 钩子,主要实现的功能就是在特定事件发生之前或者之后自动执行事先定义好 ...

  8. 浅尝Vue.js组件(二)

    本篇目录: 插槽(Slot) 插槽内容 作用域 具名插槽 作用域插槽 独占默认插槽的缩写语法 解构插槽Prop 使用场景举例 动态插槽名 具名插槽缩写 动态组件&keep-alive 异步组件 ...

  9. 27-hadoop-hbase安装

    hbase的安装分为单机模式和完全分布式 单机模式 单机模式的安装很简单, 需要注意hbase自己内置一个zookeeper, 如果使用单机模式, 那么该机器的zookeepr不可以启动 1, 添加j ...

  10. [开源项目]Shell4Win,一个在Windows下执行shell命令的解释器

    背景 顺利拿到心目中的理想offer之后,心里的负担一下减轻了很多,希望利用还没毕业之前这段难得的悠闲时间做一点有意义的事情.于是希望能做一个长久以来都想做的开源项目,就是题中提到的Windows下的 ...