<!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. 开发完iOS应用，接下去你该做的事

    iOS专项总结 关于 analyze Clang 静态分析器 Slender Faux Pas Warning Leaks Time Profiler 加载时间 iOS App启动过程 帧率等 如何优 ...

  2. 如何做好一位资深的web前端工程师

    Web前端开发工程师是一个很新的职业,在国内乃至国际上真正开始受到重视的时间不超过5年.Web前端开发是从网页制作演变而来的,名称上有很明 显的时代特征.在互联网的演化进程中,网页制作是Web 1.0 ...

  3. 《Play for Java》学习笔记（五）Form

    本书第六章以一个实例介绍了Play Framework中Form的使用,如何绑定数据,如何进行验证 一.项目结构和action

  4. CPU厂商

    1·Intel公司 Intel是生产CPU的老大哥,它占有大约80%的市场份额,Intel生产的CPU就成了事实上的x86CPU技术规范和标准.最新的酷睿2成为CPU的首选. 2·AMD公司 除了In ...

  5. JDE函数--获取当前登录人的描述

    业务描述:当前登录人ID为数字,中文姓名保存在描述1字段中 方式: 根据系统变量获取用户的地址号,根据TableIO获取用户描述1.如下图所示: 由于使用AN8时,变量类型不一致,所以使用函数将cha ...

  6. DOM系列---基础篇[转]

    DOM (Document Object Model) 即文档对象模型, 针对 HTML 和 XML 文档的 API (应用程序接口) .DOM 描绘了一个层次化的节点树,运行开发人员添加.移除和修改 ...

  7. http 报文

    HTTP报文详解 HTTP有两种报文:请求报文和响应报文,具体介绍如下 一.HTTP请求报文 先上个图,细细分析 HTTP请求报文主要包括请求行.请求头部以及请求的数据(实体)三部分 请求行(HTTP ...

  8. MongoDB　Replica Set 选举过程

    Replica Set 选举过程 心跳检测 假设我们有三个节点的replica sets:X,Y和Z节点.在replica sets结构中,这三个节点每2秒会各自向其它两个节点发送一个心跳检测请求.比 ...

  9. sql取年月日

    Sql Server 中一个非常强大的日期格式化函数 Select CONVERT(varchar(100), GETDATE(), 0): 05 16 2006 10:57AM Select CON ...

  10. 嵌套 click 第二层 click会叠加 导致 触发 多次

    $("#appearHiddenDiv").click(function(){ $("#hiddenDiv").css({display:"block ...