<!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. 使用idea对XML的增删改查

    XML:是一种可扩展标记性的语言,与java语言无关,它可以自定义标签. 1.首先需要到导入Dom4j架包,与自己所时候的ide关联 2.编写自己的xml文件,入上图所示(里面的所有元素及元素中的属性 ...

  2. 拓展KMP以及模板

    废话不多说,上模板 #include<bits/stdc++.h> ; int Next[maxn], extend[maxn], moL, strL;///Next数组.extend数组 ...

  3. HDU-6709 Fishing Master

    Description Heard that eom is a fishing MASTER, you want to acknowledge him as your mentor. As every ...

  4. 【PowerOJ1753&网络流24题】分配问题（KM）

    题意: 思路:费用流可做 最好的算法是KM板子 #include<bits/stdc++.h> using namespace std; typedef long long ll; typ ...

  5. C# 很久以前几个常用类

    Base64加密解密 using System; using System.Collections.Generic; using System.Linq; using System.Text; nam ...

  6. [CSP-S模拟测试]:f（Trie树+二分答案+meet in middle+two pointers）

    题目传送门(内部题67) 输入格式 第一行,三个整数$n$.$k$.$p$.第二行,$n$个自然数,表示$\{a_i\}$. 输出格式 输出一行,两个自然数,表示$f(res)$.$res$. 样例 ...

  7. 安装完Fedora 18后需要做的事情

    折腾了好久,在网上查看了好多资料,总算吧安装好的Fedora 18配置得差不多了,现在将过程记录下来,供以后查看用,同时也许还能帮助到和我遇到同一问题的朋友们,以后再有什么再继续添加吧. 一.添加 y ...

  8. Celery定时任务|计划任务

    适用场景几点几分执行特定的任务 定时任务 配置这个无需多说了和上篇文章一样 任务函数 硬菜来了 添加任务时候的写法 第一种: from celery_task.order_task import or ...

  9. python 2和3 字符编码

    在字符编码问题上,python2 和python3 还是有点不同的.今日写篇博客,彻底理清这个问题.. 字符编码问题的由来: 这要从计算发展历史来看待这个问题了,一开始,歪果仁使用ASCII码,8位( ...

  10. 006-spring-data-elasticsearch 3.0.0.0使用【四】-spring-data之Elasticsearch Repositories

    续 二.Elasticsearch Repositories 2.1.简介 2.1.1.Spring命名空间 Spring Data Elasticsearch模块包含一个允许定义存储库bean的自定 ...