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: border-box;
    }
时间: 2024-10-08 19:16:39

css3缩放功能实现0.5px的边框的相关文章

css3 使用SVG做0.5px 的边框细线

.HalfPixelLine{ background: repeat-x top left url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect fill='red' x='0' y='0' width='1' height='0.5'/></svg>"); height: 1px; width: 100%; }

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

CSS3实现0.5px的边框

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

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

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

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

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

CSS画0.5px的线

今天遇到一个需求,画0.5px的线,查了以下资料,主要以scale方法为主.代码如下: /*0.5px上边框*/ .half_top_border_before:before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 0.05rem; background-color: #ececec; transform: scaleY(0.5); transform-origin: center

边框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

取消谷歌 Chrome 文本框(域)外边框高亮和缩放功能的办法

首先一下是摘抄别的博友的,我遇到过这问题才找的,希望也能为其他的博友解决这问题. 浏览器一直以来挺喜欢用谷歌的Chrome,界面简洁,体积小,速度快.因为苹果Safari也是使用Webkit内核,因此他们有着类似的样式体现. 虽然有诸多优点,但也有好心办坏事的时候,比如对文本域.文本框的处理,首先对于文本域右下角会多出一个手动缩放尺寸的功能,然后会自动加上黄色的高亮边框显示,这种“人性化”处理,一般情况下是很不错的,但是对于前端开发来讲,有时候反而成了问题,比如你想精准控制文本框文本域的外观样式

ios实现0.5px的几种方法,安卓设备也实用,安卓和ios实现细线边框

//判断ios版本 ,设置一个全局的样式名 hairlines,通过运用样式名,来给不同版本ios添加样式,ios版本不同对于0.5px显示效果也区别很大,同一个设备也是显示出五花八门的效果.//安卓不需要判断版本,可以跳过js判断. <script type="text/javascript">//js放在头部head区域 if (/iP(hone|od|ad)/.test(navigator.userAgent)) { var v = (navigator.appVer