今天遇到一个需求,画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. 【hyperscan】hyperscan开源了!

    hyperscan开源了! 官网:https://01.org/zh/hyperscan 1. 新闻背景 当地时间10月19日,intel将它的高速正则表达式匹配引擎hyperscan开源了,版本4. ...

  2. 【sping揭秘】8、容器内部事件发布(一)

    容器内部事件发布 Spring的applicationContext容器提供的容器内事件发布功能,是通过java提供的自定义事件实现的 事件类型:eventObject 类继承 事件监听:eventL ...

  3. K-means算法的原理、优缺点及改进(转)

    文章内容转载自:http://blog.csdn.net/sinat_35512245/article/details/55051306                                ...

  4. python实战问题记录

    开发环境搭建 1.安装aiohttp这个异步的http框架失败 提示使用pip更高版本,但是更新之后,还是无法使用.所以,我们采用anaconda中的aiohttp,即打开anaconda,然后进入E ...

  5. Mac 安装 Ruby, Rails 运行环境

    对于新入门的开发者,如何安装 Ruby, Ruby Gems 和 Rails 的运行环境可能会是个问题,本页主要介绍如何用一条靠谱的路子快速安装 Ruby 开发环境. 次安装方法同样适用于产品环境! ...

  6. Redis随笔(五)Jedis、jedisCluster的使用

    1.Jedis客户端 https://redis.io/clients 2.Jedis源码包与使用介绍 https://github.com/xetorthio/jedis 3.项目中使用 通过mav ...

  7. ring3下的IAT HOOK

    标 题: [原创]ring3下的IAT HOOK作 者: hostzhen时 间: 2013-03-28,11:30:53链 接: http://bbs.pediy.com/showthread.ph ...

  8. C#基础篇六飞行棋

    飞行棋业务:我们要能够让2个玩家 在地图上 按照游戏规则 进行游戏 玩家类 变量:玩家位置,玩家名称,玩家标识,玩家是否在陷阱中 方法:投骰子,移动 地图类 变量:地图数据数组 方法:初始化地图数据, ...

  9. 25-hadoop-hive-函数

    内置函数: 函数分类: 内置函数查看: show funcitons; 查看函数描述: DESC FUNCTION concat; 具体见: https://cwiki.apache.org/conf ...

  10. 进程间通信 IPC(Inter-Process Communication)

    目录 一.管道 二.FIFO 三.消息队列 四.信号量 五.共享存储 六.网络IPC:套接字   一.管道 管道是进程间通信中最古老的方式,所有UNIX都提供此种通信机制.管道有以下两种局限性: 历史 ...