CSS画0.5px的线
今天遇到一个需求,画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的线的更多相关文章
- 总结一下各种0.5px的线
在PC端用1px的边框线,看起来还好,但在手机端看起来就很难看了,而0.5px的分割线会有种精致的感觉.用普通写法border:solid 0.5px red;iPhone可以正常显示,android ...
- 实现0.5px边框线
实现0.5px边框方法 方案一:利用渐变(原理:高度1px,背景渐变,一半有颜色,一半透明) CSS部分 .container { width: 500px; margin: 0px auto; } ...
- 画一条0.5px的线
通过伪类元素:after为其添加样式,用transform:scaleY令其在垂直方向缩小0.5倍 .div:after{ height: 1px; transform: scaleY(0.5); t ...
- css实现0.5px
使用缩放来0.5来实现,注意兼容各种浏览器 .frz-list li:after { content: ''; position: absolute; bottom:; height: 1px; wi ...
- 怎么画一条0.5px的边
编者按:本文由人人网FED发表于掘金,并已授权奇舞周刊转载 什么是像素? 像素是屏幕显示最小的单位,在一个1080p的屏幕上,它的像素数量是1920 1080,即横边有1920个像素,而竖边为1080 ...
- 怎么在高清屏上画一条0.5px的边
怎么在高清屏上画一条0.5px的边呢?0.5px相当于高清屏物理像素的1px.这样的目的是在高清屏上看起来会更细一点,效果会更好一点,例如更细的分隔线. 理论上px的最小单位是1,但是会有几个特例,高 ...
- 对0.5px的边的研究--------------引用
什么是像素? 像素是屏幕显示最小的单位,在一个1080p的屏幕上,它的像素数量是1920 1080,即横边有1920个像素,而竖边为1080个.一个像素就是一个单位色块,是由rgba四个通道混合而成. ...
- css3写出0.5px的边框
一说到0.5px的边框,我们一般认为是不行的,因为在ps中0.5px的线也是做不出来的,这个计算机的像素有关系. 废话不多说了,0.5px 其实用的是css3新特性,box-shadow:阴影设置 代 ...
- hairline!ios实现边框0.5px
在2014WWDC上,Ted O’Connor提出了“retina hairlines”的解决方案,即在ratina屏幕上可以显示0.5px宽度的边框.他的方案是这样的: 1 Standard bor ...
随机推荐
- linux下发送报警邮件(mailx)
本文章主要解决 linux下监控到系统状况后怎么发邮件报警的问题. 如果你是最小化安装的centos/redhat 系统,是没有自带mailx的,也就是没有mail 命令. 解决办法 yum -y i ...
- 转载:TCP/IP四层模型
转载:TCP/IP四层模型 一. TCP/IP参考模型示意图 ISO制定的OSI参考模型的过于庞大.复杂招致了许多批评.与此对照,由技术人员自己开发的TCP/IP协议栈获得了更为广泛的应用. 如图所示 ...
- Liferay-Activiti 企业特性功能介绍 (新版Liferay7)
前言 如果你是开发者 你已经是多少次开发一个项目,一次次的用一些框架,一次次的写类似的重复的代码,一次次建表\写类和方法\写HTML\CSS\JAVASCRIPT,一次次测试,一次次的写Bug...如 ...
- mongodb副本集升级步骤
1. 先从Secondary开始升级,选择一个不繁忙节点在业务峰值低情况下升级2. 把Secondary设置为隐藏节点,停库,二进制升级重起3. 使用rs.status()查看,等待节点状态为Seco ...
- 08-02 Java 代码块,代码块执行的先后顺序问题
代码块 /* 代码块:在Java中,使用{}括起来的代码被称为代码块. 根据其位置和声明的不同,可以分为 局部代码块:局部位置,用于限定变量的生命周期. 构造代码块:在类中的成员位置,用{}括起来的代 ...
- 课程一(Neural Networks and Deep Learning)总结——1、Logistic Regression
---------------------------------------------------------------------------------------------------- ...
- MVC3学习:利用mvc3+ajax实现级联下拉列表框
本例使用的是EF first code操作数据库. 一.准备数据库 级联下拉列表框,比较经典的就是省市数据表,在Model里同时创建三个类:province.cs.city.cs和dropContex ...
- Python:SQLMap的工作流程
流程图 代码解析 后面补充…… 版权 作 者:曾是土木人 新浪微博:http://weibo.com/cstmr 转载请注明出处:http://www.cnblogs.com/hongfei/p/ ...
- Selenium自动化测试Python四:WebDriver封装
WebDriver 封装 欢迎阅读WebDriver封装讲义.本篇讲义将会重点介绍Selenium WebDriver API的封装的概念和方法,以及使用封装进行自动化测试的设计. WebDriver ...
- ASP.NET Core 1.0 基础与应用启动
.NET Core http://dotnet.github.io/[https://github.com/dotnet/coreclr] ASP.NET Core 1.0 https://get.a ...