<!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. OC 实例变量(instance var)与属性(@property)的关系 isa指针

    实例变量(instance var)与属性(@property)的关系 Objective-C 2.0之后,声明一个@property name自动产生一个实例变量,名为_name,因此省去实例变量和 ...

  2. Checked 和 UnChecked 异常 的使用场合

    异常的概念  任何的异常都是Throwable类(为何不是接口??),并且在它之下包含两个子类Error / Exception,而Error仅在当在Java虚拟机中发生动态连接失败或其它的定位失败的 ...

  3. hadoop主节点（NameNode）备份策略以及恢复方法

    link:http://jiajun.iteye.com/blog/809125 一.dits和fsimage 首先要提到两个文件edits和fsimage,下面来说说他们是做什么的. 集群中的名称节 ...

  4. @media用法。

    @media版本:CSS2  兼容性:IE5+   语法:    @media  sMedia { sRules }    说明:    sMedia :  指定设备名称.请参阅附录:设备类型  sR ...

  5. mac 无法ssh localhost

    mac 无法ssh localhost,错误提示:bash: /usr/local/bin/ssh_session: Permission denied在网上找了很久也没有找到解决方案,最后根据提示自 ...

  6. EF的Model First

    一,添加ADO.NET实体数据模型(即edmx) 1,添加edmx         新建一个类库项目,项目中添加新项,选择数据/ADO.NET实体数据模型,如下图.   点击添加,实体数据模型向导窗口 ...

  7. "数学口袋精灵"bug的发现

    团队成员的博客园地址: 曾治业:http://www.cnblogs.com/zzy999/ 陈焕恳:http://www.cnblogs.com/4249ken/ 蓝叶:http://www.cnb ...

  8. bzoj 2243: [SDOI2011]染色

    #include<cstdio> #include<iostream> #define M 1000006 #define N 1000006 using namespace ...

  9. 关于java.lang.reflect.InvocationTargetException

    今天遇到java.lang.reflect.InvocationTargetException错误,卡了好一会儿,报错代码 try { Class<?> c= Class.forName( ...

  10. UIKit-3347.44.2/UICollectionView.m:3443

    Assertion failure in -[UICollectionView _dequeueReusableViewOfKind:withIdentifier:forIndexPath:viewC ...