<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>boardTest</title>
<style>
p{
margin: 50px auto;
padding: 5px 10px 5px 10px;
color: red;
text-align: center;
width: 60px;
}
p:first-child{
border-bottom: 1px solid red;
}
p:last-child{
position: relative;
}
p:last-child:after {
position: absolute;
content: '';
width: 100%;
left: 0;
bottom: 0;
height: 1px;
background-color: red;
-webkit-transform: scale(1,0.5);
transform: scale(1,0.5);
-webkit-transform-origin: center bottom;
transform-origin: center bottom
}

</style>
</head>
<body>
<div>
<p>点击1</p>
<p>点击2</p>
</div>
</body>
</html>

制作0.5px像素的细条的更多相关文章

  1. 怎么画一条0.5px的边

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

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

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

  3. 画一条0.5px的边

    1.scale方法 { height: 1px; transform: scaleY(0.5); transform-origin: 50% 100%; // 要指定origin值, 要不然会模糊 c ...

  4. 移动端 Retina屏border实现0.5px

    首先来看一下造成Retina边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRat ...

  5. web前端绘制0.5像素的几种方法

    最近完成了公司安排的移动web触屏开发,期间涉及到在移动设备上显示线条,最开始采用PC常用的css board属性来显示1个像素的线条,但是发现在移动设备上并不美观,参考淘宝.京东的触屏发现它们均是采 ...

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

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

  7. css 0.5px

    1. 利用css3新属性scale(好用推荐) 其实现的关键就是利用before或after伪元素,宽高同时设为200%,然后再缩放0.5,自然就是0.5px了 代码如下: div { positon ...

  8. css写出0.5px边框（一）

    在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...

  9. [转]retina屏下支持0.5px边框的情况

    2014-12-31更新:截至到IOS8.1,safari仍不支持@supports待safari支持@supports, 就可以利用0.5px了! 2014-7-25更新:1. 修正dpr = 1. ...

随机推荐

  1. 手动实现KVO

    前言 KVO(Key-Value Observing, 键值观察), KVO的实现也依赖于runtime. 当你对一个对象进行观察时, 系统会动态创建一个类继承自原类, 然后重写被观察属性的sette ...

  2. Linux系统中的日常监控知识点

    1.命令熟悉之w [xiongchao@oc3006745124 Desktop]$ w :: up :, users, load average: 1.48, 1.19, 1.11 USER TTY ...

  3. javaMail创建邮件和发送邮件总结

    (注: 本文是参考http://www.cnblogs.com/xdp-gacl/p/4216311.html. 感谢博主的精彩的描述) 一, 前期的准备 1, 导入 mail.jar 二, 操作步骤 ...

  4. java面向对象编程——第二章 java基础语法

    第二章 java基础语法 1. java关键字 abstract boolean break byte case catch char class const continue default do ...

  5. C#中三种定时器对象的比较

    ·关于C#中timer类 在C#里关于定时器类就有3个1.定义在System.Windows.Forms里2.定义在System.Threading.Timer类里3.定义在System.Timers ...

  6. TopCoder SRM 583 TurnOnLamps

    读错题了有没有呀,原来 lamps 是在边上的呀,当成是在点上的了,无语. 直接一个dfs 就可以 从叶子节点开始,如果有必要转换 lamp 的状态则加一个仅包含 这个 lamp 的段 然后向上扩展, ...

  7. 安装arbotix simulator仿真环境（）

    先安装rbx1功能包: cd ~/catkin_ws/src git clone https://github.com/pirobot/rbx1.git cd rbx1 git checkout in ...

  8. Java 枚举&注解

    枚举类 如何自定义枚举类 JDK1.5之前需要自定义枚举类 JDK 1.5 新增的 enum 关键字用于定义枚举类 若枚举只有一个成员, 则可以作为一种单例模式的实现方式 //枚举类 class Se ...

  9. DotNetBar v12.2.0.7 Fully Cracked

    PS: 博客园的程序出现问题,导致我的博客不能访问(转到登录页),而我自己由于 Cookies 问题,一直可以访问,所以一直未发现该问题. 感谢冰河之刃告知,thx! 更新信息: http://www ...

  10. iOS开发多线程篇—线程间的通信（转）

    这里转载 给自己一个备份 一.简单说明 线程间通信:在1个进程中,线程往往不是孤立存在的,多个线程之间需要经常进行通信 线程间通信的体现 1个线程传递数据给另1个线程 在1个线程中执行完特定任务后,转 ...