今天遇到一个需求,画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. 改变您的HTTP服务器的缺省banner

    (以下方法仅针对 IIS Asp.net) 服务器扫描发现漏洞,其中一个是: 可通过HTTP获取远端WWW服务信息 [Microsoft-IIS/8.5] 漏洞描述 本插件检测远端HTTP Serve ...

  2. D15——C语言基础学PYTHON

    C语言基础学习PYTHON——基础学习D15 20180926内容纲要: 1.CSS介绍 2.CSS的四种引入方式 3.CSS选择器 4.CSS常用属性 5.小结 6.练习 1 CSS介绍 层叠样式表 ...

  3. 整理的开源项目(全c#)

    NPOI:读写office办公软件(不需要安装office软件) http://npoi.codeplex.com/downloads/get/70099 消息中间件:DotNetMQ http:// ...

  4. python面试(3)

    一.语言 推荐一本看过最好的python书籍? 拉开话题好扯淡 谈谈python的装饰器,迭代器,yield? 标准库线程安全的队列是哪一个?不安全的是哪一个?logging是线程安全的吗? pyth ...

  5. (转)Cognos的下载地址分享

    原文:https://blog.csdn.net/Wikey_Zhang/article/details/76138965 刚开始接触Cognos,发现Cognos真是一款挺不错的报表工具,先分享一下 ...

  6. Redis学习系列五Set(集合)

    一.简介 Redis中的Set(集合)相当于C#中的HashSet,它内部的键值对时无序的.唯一的.用过Dictionary的都知道,Dictionary都知道,里面的每个键值对肯定是唯一的,因为键不 ...

  7. Vue + Element UI 实现权限管理系统 前端篇(四):优化登录流程

    完善登录流程 1. 丰富登录界面 1.1 从 Element 指南中选择组件模板丰富登录界面,放置一个登录界面表单,包含账号密码输入框和登录重置按钮. <template> <el- ...

  8. 记一次使用mybatis进行like 模糊查询遇到的问题

    "bdate like '#{date}%' and ..." 最开始这样写的· 将传入的参数和%用单引号包起来,但是这会报错 java.sql.SQLException: Par ...

  9. new Thread与线程创建

    概要:new Thread 并不意味着已经创建了一个线程,只能说明创建一个类的对象实例而已.而真正创建线程的是start()方法,此方法将调用本地方法start0()创建本地线程,而Thread的ru ...

  10. 【React 资料备份】React v16.3之后的生命周期

    React v16.4 的生命周期图 React v16.4 的生命周期 变更缘由 原来(React v16.0前)的生命周期在React v16推出的Fiber之后就不合适了,因为如果要开启asyn ...