移动端1像素边框

通常我们会有伪类和定位来解决1像素的问题，但是使用伪类也是有问题的，但是你可以换一种方式实现1像素边框的问题，box-shadow

1. 实现下边框

box-shadow: inset 0 -1px 0 0 #000;

2. 实现右边框

box-shadow: inset -1px 0 0 0 #000;

3. 实现左边框

box-shadow: inset 1px 0 0 0 #000;

4. 实现上边框

box-shadow: inset 0 1px 0 0 #000;

使用阴影设置1像素边框无法设置4个方向的边框，只能设置1一个方向的边框，也无法设置边框圆角的问题，对于这些问题还是需要做一些特殊处理的。

原文地址：https://www.cnblogs.com/wuxianqiang/p/10541686.html

时间： 2024-10-06 16:14:36

移动端1像素边框的相关文章

【H5开发基础】移动端1像素边框问题的解决方案

自从乔帮主提出retina屏以来.可练就了不少前端兄弟的像素眼,有强迫症的伙伴们日子可就煎熬了.为了画出真正的1像素边框,前端猿们也是受尽各浏览器的虐待了. 关于什么是移动端1像素边框问题,先上两张图,大家就明白了. 图1 图2 实现1PX边框的方法有很多,各有优缺点,比如通过背景图片实现.通过transform: scale(0.5)实现.本次实现的是通过VIEWPORT+rem实现的,优点是可以自适应已知的各类手机屏幕,且不存在其它方法存在的变颜色困难.圆角阴影失效问题.缺点嘛,这方法适全新

移动端1像素边框问题与CSS媒体查询

做移动端页面开发时,我们是按照UI设计图上的尺寸来做的. 比如说,UI给的图是750x1344(Iphone6标准),我们在浏览器做适配时,按照375x667来裁切,设计图上30像素的高度,开发时使用的是15px,这是因为Iphone6的设备像素比为2,css中的1px在设备中的像素为2px.当我们需要实现设计图中1px高度的边框时,在css中的1px实际上变成了2px边框,由此产生了1像素边框问题. 1.window.devicePixelRatio设备像素比 定义: window.devic

移动web 1像素边框

实现方法 border-image 图片 实现 这篇文章是腾讯github上的解决方案border-image来实现的 链接走起 <使用border-image实现类似iOS7的1px底边>,缺点是,你需要制作图片,圆角的时候会出现模糊. .border-image-1px { border-width: 1px 0px; -webkit-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAE

移动web 1像素边框 瞧瞧大公司是怎么做的

前言 移动端web项目越来越多,要求也越来越高,好多设计师都发现了,你们前端实现的边线为什么是糊的,根本不是1像素,好吧,我只能找参考,要么征服设计,要么征服自己. 关于为什么设置的是1px,而显示出来却不是呢,这里我就不多做介绍了:放出几个链接, 设备像素比devicePixelRatio简单介绍,还有 移动端高清.多屏适配方案 以及 iPhone 6 屏幕揭秘,相信大家看完这几个自己也就能想出解决的办法了. 哪些项目实现了 一般遇到问题,都是找一下成熟项目他们公司的代码看看,自己也翻看了好多

移动端0.5像素0.5像素边框0.5像素圆角边框

0.5像素线条: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes&quo

移动端，h5页面1px 1像素边框过粗解决方案

//h5有个小bug 1像素边框过粗,其实有个解决方案,就是利用伪元素:after,结合css3中的scale在y轴方向缩放0.5就行了 //父元素 //删除border-bottom,添加position:relative,伪元素定位用. - border-bottom:1px solid yellow: + position:relative; //为父元素添加:after伪类 :after { content: ''; height: 1rpx; background: $colorE3;

1像素边框

1像素边框用2px来渲染,所以有这么个方法: .a{        width: 100px;        height: 100px;        border-top: 1px solid #333;        position: relative;    }.a:after{        content: "";        position: absolute;        bottom: 0px;        width: 100%;        borde

css 一像素边框表格

1表格一像素边框 有三要素:1<table border=0>  2table的样式设置border-collapse:collapse;  3 td的样式设置border:#ccc solid 1px: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title&

移动端半像素 0.5PX 边框实现。

1 /*半像素*/ 2 .halfpxline_after, .halfpxline_before { 3 position: relative; 4 } 5 6 .halfpxline_after:after, .halfpxline_before:before { 7 content: ''; 8 display: block; 9 position: absolute; 10 left: 0; 11 right: 0; 12 height: 1px; 13 background-color