移动端页面0.5px border的实现

移动端上经常发现1px边框异常的粗,因此,决定用伪类配合css3来实现0.5px边框

代码如下:

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
 5  <meta charset="UTF-8">
 6  <title>0.5 border</title>
 7  <style type="text/css">
 8  *{margin: 0;padding: 0;-webkit-box-sizing:border-box;}
 9  ul{
10   position: relative;
11  }
12  li{
13   height: 60px;
14   line-height: 60px;
15   padding-left: 10px;
16   position: relative;
17   font-size: 20px;
18  }
19  li:after{
20   content: "";
21   display: block;
22   position: absolute;
23   left: -50%;
24   width: 200%;
25   height: 1px;
26   background: #ededed;
27   -webkit-transform:scale(0.5);
28  }
29  </style>
30 </head>
31 <body>
32  <ul>
33   <li>list-item1</li>
34   <li>list-item2</li>
35   <li>list-item3</li>
36   <li>list-item4</li>
37   <li>list-item5</li>
38   <li>list-item6</li>
39   <li>list-item7</li>
40   <li>list-item8</li>
41  </ul>
42 </body>
43 </html>

主要思路是利用伪类来实现border,先放大一倍,再利用css3缩小一倍。再用定位定到正确的位置即可

转载于:https://www.cnblogs.com/raoyunxiao/p/4241982.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/574924.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python 漂亮界面demo_在这个什么都看脸的时代,如何用 GUI 提高 python 程序的颜值?...

0、前言有不少初学者会问&#xff0c;Python 写的程序看起来好丑啊&#xff0c;只能在那个黑黑的框里运行吗&#xff1f;隔壁家的 JS 好像挺好看的&#xff0c;还能有酷炫效果呢……其实呢&#xff0c;术业有专攻&#xff0c;Python 擅长的领域在后台服务器、数据处理、科学计算…

mysql5.3开发文件,cent0s 5.3该下载哪个版本的 mysql安装文件比较合适

我当前的linux是cent0s 5.3请问应该下载哪个版本的 mysql安装文件比较合适&#xff1f;&#xff1f;* Windows* Windows x64* Linux (non RPM packages)* Linux (non RPM, Intel C/C compiled, glibc-2.3)* Red Hat Enterprise Linux 3 RPM (x86)* Red Hat Enterprise Linux 3 …

【LeetCode】Minimum Depth of Binary Tree 二叉树的最小深度 java

【LeetCode】Minimum Depth of Binary Tree Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along the shortest path from the root node down to the nearest leaf node. 递归和非递归&#xff0c;此提比较简单。广度优先遍历即可。…

pythonopencv的配置_python配置与使用OpenCV

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"阿里技术人对外发布原创技术内容的最大平台&…

php中datetime,珍藏 PHP中DateTime的常用方法

前言实例化对象前面加\表示的是&#xff0c;在命名空间中使用原生的类&#xff0c;如果没有使用命名空间的话&#xff0c;可以把前面的\给删除掉输出当前时间$datetime new \DateTime;print_r($datetime->format(Y-m-d H:i:s));输出给定的时间$datetime new \DateTime(201…

php 实现跨站下载图片,一个图片url访问后直接下载怎样实现

一个图片url访问后直接下载怎样实现先看代码downloadIamge(imgsrc, name) {//下载图片地址和图片名let image new Image();// 解决跨域 Canvas 污染问题image.setAttribute("crossOrigin", "anonymous");image.onload function() {let canvas document.…

【BZOJ】【1086】 【SCOI2005】王室联邦

树分块 orz vfk && PoPoQQQ http://vfleaking.blog.163.com/blog/static/174807634201231684436977/http://blog.csdn.net/popoqqq/article/details/42772237 这题是要把树分成一块一块的……&#xff08;感觉好像不是原来理解的树分块处理操作啊……&#xff09; 每块…

matlab火焰测温源程序,一种火焰测温方法与流程

本发明涉及一种测量火焰温度的方法。背景技术&#xff1a;火焰是气态的且正在发生剧烈氧化反应的燃料及各种中间产物及最终产物的混合物。在煤化工、化工领域&#xff0c;在高温、高压反应器(或气化炉)上&#xff0c;火焰检测器一般安装在气化炉的顶部或者中下部&#xff0c;用…

python spark hadoop_使用Scala或Python列出存储在Hadoop HDFS上的Spark群集中可用的所有文件?...

列出Spark中本地可用的所有文件名的最有效方法是什么&#xff1f;我正在使用Scala API&#xff0c;但是&#xff0c;Python也应该没问题。解决方案import org.apache.hadoop.fs。{FileSystem&#xff0c;FileUtil&#xff0c;Path}import scala.collection.mutable.Stack$ b $ …

asp.net权限控制配置web.config

项目下 有三个文件夹 A,B,C 验正方式是 Forms 验正 我要设置他们的访问权限为, A,匿名可访问 B,普通用户授权后才能访问 C,只允许管理员访问 <configuration> <location path "A "> <system.web> <authorization> <allow users…

oracle排序函数性能,oracle排序函数

rank,dense_rank,row_number&#xff0c;以及分组排名partitionrank:排名会出现并列第n名&#xff0c;它之后的会跳过空出的名次&#xff0c;例如&#xff1a;1,2,2,4dense_rank:排名会出现并列第n名&#xff0c;它之后的名次为n1&#xff0c;例如&#xff1a;1,2,2,3row_numbe…

pythonplotline_带误差条的python绘图线,pythonplotlinewitherrorbar

我们有时候会面临画带有误差的图&#xff0c;大致长成下面这个样子image.png代码为# -*- coding: utf-8 -*-"""Created on Sun Jul 5 21:12:17 2020author: x1c"""import matplotlib.pyplot as pltimport seaborn as snsimport numpy as npsns.s…

php什么是变量6,PHP变量是什么

PHP是一门弱类型语言&#xff0c;本身不严格区分变量的类型。PHP在变量申明的时候不需要指定类型。PHP在程序运行期间可能进行变量类型的隐示转换。 和其他强类型语言一样&#xff0c;程序中也可以进行显示的类型转换。PHP变量可以分为简单类型(int、string、bool)、集合类型(a…

美国只有两样东西要比中国 贵,一个是智慧财产权,一个是人工

美国只有两样东西比中国贵 最近中国一直在热传美国的物价低于中国&#xff0c;特别是生活必需品方面&#xff0c;甚至换算成同一种货币都低于中国。从整体情况来 看&#xff0c;美国人各项消费的支出所占收入的比例要远远低于中国人。有人提出来疑问说&#xff0c;那美国人收入…

红黑树和平衡二叉树的区别_面试题精选红黑树(c/c++版本)

红黑树的使用场景非常广泛&#xff0c;比如nginx中用来管理timer、epoll中用红黑树管理事件块&#xff08;文件描述符&#xff09;、Linux进程调度Completely Fair Scheduler用红黑树管理进程控制块、CSTL中map,set的底层实现全是用的红黑树。掌握红黑树的原理以及使用场景&…

linux 更新软件命令 失败,对linux下软件(库)的更新命令详解

在ubuntu服务器下安装包的时候&#xff0c;经常会用到sudo apt-get install 包名 或 sudo pip install 包名&#xff0c;那么两者有什么区别呢&#xff1f;1.区别pip用来安装来自PyPI(https://www.python.org/)的python所有的依赖包&#xff0c;并且可以选择安装任何在PyPI上已…

查看oracle死锁进程并结束死锁

查看oracle死锁进程并结束死锁 摘自: http://sqcjy111.iteye.com/blog/1183928 查看锁表进程SQL语句1&#xff1a; select sess.sid, sess.serial#, lo.oracle_username, lo.os_user_name, ao.object_name, lo.locked_mode from v$locked_object lo, dba_objects ao, v$sessio…

python科学坐标图绘制的四个要素_Python3.0科学计算学习之绘图(四)

绘制三维图&#xff1a;mplot3d工具包提供了点、线、等值线、曲面和所有其他基本组件以及三维旋转缩放的三维绘图。1.散点的三维数据图from mpl_toolkits.mplot3d import axes3d #需要从mplot3d模块中导入axes 3D类型import numpy as npimport matplotlib.p…

linux shell tr命令,linux shell tr命令详解

tr命令是linux下的一个命令&#xff0c;那么它的语法和用途是什么呢?下面由学习啦小编为大家整理了linux shell tr命令的相关知识&#xff0c;希望大家喜欢!linux shell tr命令tr是translate的简写&#xff0c;亦即翻译&#xff0c;但是遗憾的是&#xff0c;它不能翻译句子&am…

PHP 函数:intval()

intval 变量转成整数类型。 语法: int intval(mixed var, int [base]); 返回值: 整数 函数种类: PHP 系统功能 内容说明:本函数可将变量转成整数类型。可省略的参数 base 是转换的基底&#xff0c;默认值为 10。转换的变量 var 可以为数组或类之外的任何类型变量。转载于:htt…