<!doctype html>

<html lang="en">

<head>

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

    <meta charset="UTF-8">

    <title>CSS3实现小于1px的边框(移动端)</title>

    <style type="text/css">

        *{margin: 0;padding: 0;-webkit-box-sizing:border-box;}

        .div-big{

            position: relative;

        }

        .div-small{

            height: 60px;

            line-height: 60px;

            padding-left: 10px;

            position: relative;

            font-size: 20px;

        }

        .div-small:after{

            content: "";

            display: block;

            position: absolute;

            left: -50%;

            width: 200%;

            height: 1px;

            background: #ededed;

            -webkit-transform:scale(0.5);

        }

    </style>

</head>

<body>

<div class="div-big">

    <div class="div-small">第一块</div>

    <div class="div-small">第二块</div>

</div>

</body>

</html>

CSS3实现小于1px的边框(移动端)的更多相关文章

  1. [半转]1px边框 移动端

    半转的意思是借鉴参考,搬砖,加了一些自己的想法. 在移动端里,因为存在2倍像素的问题,所以很多时候,移动端上的1px边框并不是意义上的.从下图红色框看到dpr:2.0 ,表示1px等于2倍的物理像素. ...

  2. 在移动端实现1px的边框

    由于分辨率 DPI 的差异,高清手机屏上的 1px 实际上是由 2×2 个像素点来渲染,有的屏幕甚至用到了 3×3 个像素点 所以 border: 1px 在移动端会渲染为 2px 的边框 与设计图产 ...

  3. css笔记--web端小于1px设计的处理方法

    HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...

  4. css3使用技巧：细线边框的3种不同的写法

    一般的app边框描边的线都小于一像素,那么我就像往常一样直接描了1px的边框,虽然是1px可是结果和app里的描边完全不一样“粗了”,所以就在网找了一下看看有没有解决方法,可是找了一会没找到,那咋办, ...

  5. CSS如何作小于1PX的边

    小于1PX的边能使页面变得更加精致,那么具体怎么做呢? 主要思路就是设置伪元素先放大再通过变换缩小. 代码如下 .border { position: relative;//如果有圆角 } .bord ...

  6. img 标签注意 默认img标签，有一个1px的边框 img{ border: 0; }

    默认img标签,有一个1px的边框 img{ border: 0; }

  7. input，button制作按钮IE6，IE7点击时1px黑边框的解决方法

    按钮在IE6中点击时1px黑边框的最常见的解决方法 首先设置按钮为none,然后在按钮外面套一层来实现边框的效果,部分代码如下 .btnbox{ border:solid 1px red;} .btn ...

  8. 移动端 1px 像素边框问题的解决方案（Border.css）

    前言 关于什么是移动端1像素边框问题,先上两张图,大家就明白了. 解决方案 将以下代码放在border.css文件中,然后引入 常用className border:整个盒子都有边框 border-t ...

  9. 移动端1px的边框

    我们知道,在移动端存在物理像素(physical pixel)和设备独立像素(density-independent pixel)的概念.物理像素也称为设备像素,它是显示设备中一个最微小的物理部件,每 ...

随机推荐

  1. JavaSE---显式锁

    1.概述 1.1.jdk5之前,用于  调节共享对象访问机制  只有 synchronized.volatile:     jdk5之后,提供了  显示锁:Lock.ReentrantLock...: ...

  2. java.lang.Void类源码解析_java - JAVA

    文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 在一次源码查看ThreadGroup的时候,看到一段代码,为以下: /* * @throws NullPointerEx ...

  3. extjs计算两个DateField所间隔的月份（天数）

    需求:两个DateField控件,分别为开始时间和结束时间.当选择完结束时间后,自动计算这两个时间段所间隔的月或天数. 需要解决的问题: 1.直接使用Ext.getCmp('endDate').get ...

  4. 百度小程序 配置 app.json 文件

    可以通过配置 app.json 文件,设置 SWAN 的界面.路径.多 TAB 等. app.json 配置项列表如下 属性 类型 必填 描述 pages Array.<string> 是 ...

  5. JDK1.8 LinkedList双向链表源码

    序言 LinkedList是一个双向链表 也就是说list中的每个元素,在存储自身值之外,还 额外存储了其前一个和后一个元素的地址,所以也就可以很方便地根据当前元素获取到其前后的元素 链表的尾部元素的 ...

  6. poj 3613Cow Relays

    Description For their physical fitness program, N (2 ≤ N ≤ 1,000,000) cows have decided to run a rel ...

  7. [ZJU 1003] Crashing Balloon

    ZOJ Problem Set - 1003 Crashing Balloon Time Limit: 2 Seconds      Memory Limit: 65536 KB On every J ...

  8. IIS发布mvc网站需操作的内容

    VS2010 WEB部署,先在IIS中创建站点,站点创建需注意以下的内容,创建完成后点击[发布]---[WEB部署]--[发布]. 在IIS7下部署MVC已经简化了许多,基本按照一般的项目部署即可,下 ...

  9. Java数据结构之单链表

    这篇文章主要讲解了通过java实现单链表的操作,一般我们开始学习链表的时候,都是使用C语言,C语言中我们可以通过结构体来定义节点,但是在Java中,我们没有结构体,我们使用的是通过类来定义我们所需要的 ...

  10. Educational Codeforces Round 16 E. Generate a String （DP）

    Generate a String 题目链接: http://codeforces.com/contest/710/problem/E Description zscoder wants to gen ...