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 ...
随机推荐
- 基于alpine用dockerfile创建的爬虫Scrapy镜像
一.下载alpine镜像 [root@DockerBrian ~]# docker pull alpine Using default tag: latest Trying to pull repos ...
- 安装SVN并进行汉化的详细步骤
安装SVN并进行汉化的详细步骤 SAE提供了不同的代码部署方式,可以分为两类:一是通过SVN客户端部署,这是SAE推荐的代码部署方法.另一个是通过非SVN客户端部署,即在线代码在线编辑器和推荐应用安装 ...
- odoo开发笔记--odoo可用小图标
odoo系统的小图标都采用了 fontawesome字体图标 官网: http://fontawesome.dashgame.com/ Github:http://fortawesome.github ...
- python 继承 多态
python 的继承 #-*- coding:utf-8 -*-class A(object): def __init__(self): print('A:我是肯定会执行的!!') def fun(s ...
- 使用代数方程库 Algebra.js解二元一次方程
假设二元一次方程如下: x + y = 11 x - y = 5 解方程如下: <!DOCTYPE html> <html lang="zh-CN"> &l ...
- Apple Pay 支付集成
Refer:https://open.unionpay.com/ajweb/product/detail?id=80 交易步骤: 1.浏览并选购商品:用户通过手机客户端与商户系统交互浏览选购商品,客户 ...
- 全网最详细的Windows系统里Oracle 11g R2 Database服务器端(64bit)的下载与安装(图文详解)
不多说,直接上干货! 环境: windows10系统(64位) 最好先安装jre或jdk(此软件用来打开oracle自带的可视化操作界面,不装也没关系:可以安装plsql,或者直接用命令行操作) Or ...
- What does -> do in clojure?
https://stackoverflow.com/questions/4579226/what-does-do-in-clojure
- jar包运行main程序
当把java项目打包成jar后,如何运行main函数呢? 第一种:指定运行main类: 1 java -cp test.jar com.hk.app.Application 第二种:在MANIFEST ...
- java web 机试
经过近一个月的学习,我们的java web已经学习完了. 这是我们这次的机试题. 一:题目 请利用MVC设计模式,并使用JSP.Servlet.JSTL和JQuery等技术实现动态条件的分页显示查询. ...