<!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. Centos 6.4 x86_64 最小化安装后的优化——还需要整理

      Centos 6.4 x86_64 最小化安装后的优化   购买了服务器以后要做的第一件事就是安装操作系统了,这里推荐安装 Centos 6.4 x86_64,安装系统时要选择最小化安装(不需要图 ...

  2. JConsole和VisualVM远程访问JMX

    1.jvisualvm监控tomcat 修改tomcat的bin目录下的 catalina.sh文件,搜索JAVA_OPTS="",在引号中添加参数 JAVA_OPTS=" ...

  3. 【leetcode】1175. Prime Arrangements

    题目如下: Return the number of permutations of 1 to n so that prime numbers are at prime indices (1-inde ...

  4. 【leetcode】698. Partition to K Equal Sum Subsets

    题目如下: 解题思路:本题是[leetcode]473. Matchsticks to Square的姊妹篇,唯一的区别是[leetcode]473. Matchsticks to Square指定了 ...

  5. 华为云服务器centos7.3安装tomcat

    1. 进入tomcat官网,复制下载地址 https://tomcat.apache.org/download-80.cgi#8.5.47 鼠标右键,复制链接地址:http://mirrors.tun ...

  6. win10 1903

    Windows 10 v1903/19H1 and Windows Server 2019 v1903/19H1 will hang or BSOD during power-on when vIOM ...

  7. 在阿里云centOS7上部署Redis 5.0.5主从 + 哨兵模式

    一.在两台服务器上分别安装.配置Redis 5.0.5 ,为一主一从 安装Redis关键命令: 将安装包上传至:/home 目录下解 压:.tar.gz 安装依赖:yum install gcc 安装 ...

  8. SQL Server创建链接服务器

    1.通过sql语句创建链接服务器,数据是sql server的 EXEC sp_addlinkedserver @server='test', --链接服务器别名,自定义 @srvproduct='' ...

  9. IK词库扩展

    先写个标题,慢慢更新 默认的词库就算最小细粒度分词,很多名词也不会单字分词 比如:阿迪达斯,在IK是一个词,搜索每个字的单字关键词是无结果的,必须搜索阿迪达斯才有结果 所以我们需要扩展词库 IK官方教 ...

  10. Git 实践

    最近也学习了Git的相关知识,现通过一个实例来记录Git使用流程,也方便日后使用. git的基础学习: https://www.yiibai.com/git/git-quick-start.html ...