<!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. swfobject2.2

    官方网址:http://blog.deconcept.com/swfobject/ Github地址:https://github.com/swfobject/swfobject 谷歌地址 貌似被和谐 ...

  2. Hadoop概括——学习笔记<一>转

    前言 第一章主要讲的是hadoop基础知识.老师讲的还是比较全面简单的,起码作为一个非专业码农以及数据库管理人员,也能狗大致了解其特点 首先是概括图(以hadoop2.0为例)  一.Hadoop基础 ...

  3. Jquery异步提交$.ajax的使用

    function test(){ var myEntity=new Object(); myEntity.pro1="xxx"; myEntity.pro2=10; $.ajax( ...

  4. Axis2 webservice入门--开发环境搭建，概念理解

    关于webservice的概念,网上有各种解释,但是不太好懂. 可以这样理解:1.一个webservice就是一个“功能”,只是这个功能是别人写好的,被放在别人的网站上.                ...

  5. loadrunner 如何做关联

    在页面中为了防止CRSF攻击,每次访问登录页面时,在浏览器器端生成一个token. 在提交时检验这个token是否有效,提交后token自动失效.   如果使用loadrunner来测试此系统话需要做 ...

  6. 老男孩linux高级架构 百度云盘下载

    关于Linux的资源我了解还是比较少的,因为我最讨厌用命令行了(那是我大学时代的阴影啊!).这个资源收集很久了一直没有分享出来,因为我对Linux的了解真的很少,不知道怎么去描述,但是今天分享出来我想 ...

  7. 统计类别数量并且使用pyplot画出柱状图

    从数据库中读取数据,具体操作为: # -*- coding: utf-8 -*- from numpy import * import numpy as np import pandas as pd ...

  8. python中的urlencode与urldecode

    当url地址含有中文,或者参数有中文的时候,这个算是很正常了,但是把这样的url作为参数传递的时候(最常见的callback),需要把一些中文甚至'/'做一下编码转换. 所以对于一些中文或者字符,ur ...

  9. 判断是否是iOS8

    判断是否是iOS8 //判断是否是iOS8 if ([[UIDevice currentDevice].systemVersion doubleValue]>=8.0) { NSLog(@&qu ...

  10. bzoj 2434: [Noi2011]阿狸的打字机

    #include<cstdio> #include<iostream> #include<cstring> #define M 100008 using names ...