<!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. 18. 4Sum -- 找到数组中和为target的4个数

    Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = tar ...

  2. android 圆角边框及图片

    <?xml version="1.0" encoding="UTF-8"?> <shape xmlns:android="http: ...

  3. 转：Vmware Exsi使用简要说明

    界面介绍 Exsi的管理工具可以用vSphere Client来管理虚拟机.管理虚拟的网络交换机.管理物理机的内存.物理机的硬盘.物理机的CPU等资源.界面的大致介绍如下图. 资源分配 创建内存.CP ...

  4. linux 系统安装 mysql

    安装mysql所需要的依赖环境 yum -y install gcc gcc-c++ gcc-g77 autoconf automake zlib*  libxml* ncurses-devel li ...

  5. mysql 5.7 zip 文件在 windows下的安装

    1.下载mysql最新版本. http://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.15-winx64.zip 2.解压到文件夹. D:\softwa ...

  6. [示例]创建Student类，输入学生信息并存入字典，将3个存有学生信息的字典存入数组，并计算

    代码: main: #import <Foundation/Foundation.h> #import "Student.h" int main(int argc, c ...

  7. [开发笔记]-使用jquery获取url及url参数的方法

    使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作 1.jquery获取url很简单,代码如下: window.location.href; 其实只是用到了javasc ...

  8. dhtmlxScheduler日历日程控件包括天视图，周视图，月视图，年视图和日程表视图

    dhtmlxScheduler 是一个基于Web的类似于Outlook的日历日程控件. 它完全由javascript/js/css编写, 提供类似于MS Outlook Calendar, Apple ...

  9. 【转发】CentOS 7 巨大变动之 systemd 取代 SysV的Init

    1 systemd是什么 首先systmed是一个用户空间的程序,属于应用程序,不属于Linux内核范畴,Linux内核的主要特征在所有发行版中是统一的,厂商可以自由改变的是用户空间的应用程序.   ...

  10. mybatis中oracle in>1000的处理

    oracle数据库中,如果你使用in,然后括号对应的是一个子查询,当查询出来的结果>1000的时候就会报错. 这个是数据库的规定,我们无法改变它. 如何解决这个问题呢? 现在我看到了三种解决方式 ...