移动端半像素 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: #e5e5e5;
14   -webkit-transform: scaleY(0.5);
15   transform: scaleY(0.5);
16 }
17
18 .halfpxline_after:after {
19   bottom: 0;
20   -webkit-transform-origin: 0 1px;
21   transform-origin: 0 1px;
22 }
23
24 .halfpxline_before:before {
25   top: 0;
26   -webkit-transform-origin: 0 0;
27   transform-origin: 0 0;
28 }
时间: 2024-10-31 17:09:49

移动端半像素 0.5PX 边框实现。的相关文章

div背景透明内容不透明与0.5PX边框兼容设置

1.问题:设置 border-width:0.5px;  并兼容安卓和苹果移动端.  兼容:苹果IOS的 safari 支持浮点数边框,安卓浏览器不支持,会四舍五入到1px.不同浏览器效果额不同  解决方案:设置2层嵌套的div,最外层的用来定位,保障我们设置的内容不会脱离原先的文档流.   里层设置两个div,一个用来书写内容,一个用来专门设置边框 HTML代码 : <!-- position_box用来定位,控制该区域在原文档流中的位置 --> <div class="po

移动端页面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"&g

css3缩放功能实现0.5px的边框

0.5px 的像素在移动端的要求还是需要的. 在网上找了一个具体的实现办法,核心就是css3的缩放功能. 加box-sizing:border-box:是为了边框可以一起缩放. .border:after{ content: ""; position: absolute; border: 1px solid red; width: 200%; height: 200%; transform: 0 0; transform: scale(0.5,0.5); box-sizing: bor

CSS3实现0.5px的边框

前端页面细节处理好了才会显得精致.边框在网页中是常见的一种样式了.虽然不把它处理为0.5px看上去没毛病,但是想让你做的东西征服更多的人,这些细节处理是必须的. 今天主要说一下如何让边框显示0.5px的方法: 方法一:利用渐变 关于渐变可以看下面两篇文章做深入了解: CSS3 渐变(Gradients) 深入理解CSS3 gradient斜向线性渐变 实现原理: 把元素的伪类高度设为1px,背景渐变,一半有颜色,一半透明. 线上案例:百度糯米(没有改版的话) 代码如下: <!DOCTYPE ht

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

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

css3写出0.5px的边框

一说到0.5px的边框,我们一般认为是不行的,因为在ps中0.5px的线也是做不出来的,这个计算机的像素有关系. 废话不多说了,0.5px 其实用的是css3新特性,box-shadow:阴影设置 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div sty

CSS 0.5px 细线边框的原理和实现方式

细线边框的具体实现方法有:伪元素缩放或渐变,box-shadow模拟,svg画线,border-image裁剪等.要实现小于1px的线条,有个先决条件:屏幕的分辨率要足够高,设备像素比要大于1,即css中的1个像素对应物理屏幕中1个以上的像素点. 对于普通电脑,屏幕物理像素和css像素一一对应,显示的最小单位就是1px.而现在的手机,屏幕物理宽度一般都大于页面显示宽度.例如苹果6s的屏幕分辨率为1334x750像素,但是以375px的宽度显示页面,设备像素比就是750/375=2:此时在css中

Frozen UI中提取的半像素边框

<style> .pxc { <!-- border-top: 1px solid #e0e0e0; --> background-position: left top; background-image:linear-gradient(to top, transparent 0%,transparent 50%,#e0e0e0 50%,#e0e0e0 100%); background-image: -ms-linear-gradient(bottom, transparent

边框0.5px的实现方法

原理: css3 的缩放   ---->    transform: scale() 完整代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { height: 200px; width: 200px; margin: 5