<!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. 【leetcode】525. Contiguous Array

    题目如下: 解题思路:这个题目可以这么做,遍历数组,如果元素是0,则count --:否则count ++:这样的话,每遍历到一个下标i,count的值就是0>i区间内0和1的差值.如果我们能找 ...

  2. HDU 5687 Problem C ( 字典树前缀增删查 )

    题意 : 度熊手上有一本神奇的字典,你可以在它里面做如下三个操作: 1.insert : 往神奇字典中插入一个单词 2.delete: 在神奇字典中删除所有前缀等于给定字符串的单词 3.search: ...

  3. ipcloud上传裁切图片

    主页: <!doctype html> <html> <head> <meta charset="utf-8"> <meta ...

  4. SpringBoot整合knife4j

    官网说明及用法: 简介 swagger-bootstrap-ui是springfox-swagger的增强UI实现,为Java开发者在使用Swagger的时候,能拥有一份简洁.强大的接口文档体验 核心 ...

  5. Activiti创建表(三)

    创建Mysql 创建 mysql 数据库 activiti(名字任意):CREATE DATABASE activiti DEFAULT CHARACTER SET utf8; pom.xml < ...

  6. Quadratic equation

    Quadratic equation 牛客多校九B 给定 $(x+y)\%mod=b$ $(x*y)\%mod=c$ 求 $x,y$ 二次剩余 求$((x-y)^{2})\%mod = (b\time ...

  7. B. Equal Rectangles

    B. Equal Rectangles 给定4*N个数,是否能构成N个矩形 面积均相等 每次取两个大的,两个小的 #include<bits/stdc++.h> using namespa ...

  8. SpringBoot学习-第一章

    1.SpringBoot入门 开发环境:JDK1.8 开发工具:IDEA2017.3.1 1.简介: Spring Boot让我们的Spring应用变的更轻量化.比如:你可以仅仅依靠一个Java类来运 ...

  9. wap开发tips

    1.overflow-x 这真的是一个大坑,一旦你在body或者html上用了这个属性,对不起,如果你的页面出现滚动条的话,那就会出现莫名其妙的bug,滑动页面的时候fix在顶部或者底部的会挡住. 解 ...

  10. How To Use the Widget Factory 使用widget factory创建插件

    To start, we'll create a progress bar that just lets us set the progress once.  创建一个基于widget factory ...