CSS3实现小于1px的边框(移动端)
<!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的边框(移动端)的更多相关文章
- [半转]1px边框 移动端
半转的意思是借鉴参考,搬砖,加了一些自己的想法. 在移动端里,因为存在2倍像素的问题,所以很多时候,移动端上的1px边框并不是意义上的.从下图红色框看到dpr:2.0 ,表示1px等于2倍的物理像素. ...
- 在移动端实现1px的边框
由于分辨率 DPI 的差异,高清手机屏上的 1px 实际上是由 2×2 个像素点来渲染,有的屏幕甚至用到了 3×3 个像素点 所以 border: 1px 在移动端会渲染为 2px 的边框 与设计图产 ...
- css笔记--web端小于1px设计的处理方法
HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...
- css3使用技巧:细线边框的3种不同的写法
一般的app边框描边的线都小于一像素,那么我就像往常一样直接描了1px的边框,虽然是1px可是结果和app里的描边完全不一样“粗了”,所以就在网找了一下看看有没有解决方法,可是找了一会没找到,那咋办, ...
- CSS如何作小于1PX的边
小于1PX的边能使页面变得更加精致,那么具体怎么做呢? 主要思路就是设置伪元素先放大再通过变换缩小. 代码如下 .border { position: relative;//如果有圆角 } .bord ...
- img 标签注意 默认img标签,有一个1px的边框 img{ border: 0; }
默认img标签,有一个1px的边框 img{ border: 0; }
- input,button制作按钮IE6,IE7点击时1px黑边框的解决方法
按钮在IE6中点击时1px黑边框的最常见的解决方法 首先设置按钮为none,然后在按钮外面套一层来实现边框的效果,部分代码如下 .btnbox{ border:solid 1px red;} .btn ...
- 移动端 1px 像素边框问题的解决方案(Border.css)
前言 关于什么是移动端1像素边框问题,先上两张图,大家就明白了. 解决方案 将以下代码放在border.css文件中,然后引入 常用className border:整个盒子都有边框 border-t ...
- 移动端1px的边框
我们知道,在移动端存在物理像素(physical pixel)和设备独立像素(density-independent pixel)的概念.物理像素也称为设备像素,它是显示设备中一个最微小的物理部件,每 ...
随机推荐
- 【leetcode】1160. Find Words That Can Be Formed by Characters
题目如下: You are given an array of strings words and a string chars. A string is good if it can be form ...
- React Native 之TouchableOpacity组件
使用TouchableOpacity组件 实现单击事件只需要声明onPress属性即可,其他同理,实现onPressIn,onPressOut,onLongPress constructor(prop ...
- minilzo使用流程
/* testmini.c -- very simple test program for the miniLZO library This file is part of the LZO real- ...
- Java——static
[static] <1>static成员变量存储在内存data segment区域,不是存放在堆中. <2>静态成员变量属于整个类,任何一个对象都可以访问这个值:如果没有对象, ...
- Java——类
[类]
- 【CF1252G】Performance Review(线段树)
题意: n,q<=1e5,a[i],b[i][j]<=1e9,保证能力值互不相同,询问之间保留前面的影响 思路:其实把大于a[1]的看成0,小于的看成1,设第i天小于a[1]的有b[i]个 ...
- TCP服务器并发编程构架:完成端口IOCP模式
windows下socket网络编程模式:IOCP 完成端口 1)IOCP异步事件的获取放到操作系统的网络驱动层来处理,实际上反而是降低了编程难度, 2)同时对于多线程的并发调度,也放到操作系统级别来 ...
- ASP.NET MVC 下拉的使用(ViewData传递)
C#部分 public void GetViewData() { List<string> data = new List<string>(); data.Add(" ...
- Linux shell - ps,wc命令用法
例1. 查看Oracle数据库活动进程LOCAL=NO,输出行数 oracle@sha> ps -ef|grep LOCAL=NO|wc -l 15 解释:ps -ef是查看所有的进程的 然后用 ...
- Extending Widgets with the Widget Factory
https://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/ 实例 https://github.com/tkvw/jQue ...