实现0.5px的一条线

.box{

　　position: relative;

}

.box::after{

　　content: ‘‘;

　　position: absolute;

　　width: 200%;

　　height: 1px;

　　bottom: 0;

　　border-bottom: 1px solid red;

　　transform-origin: 0 0;

　　transform: scale(.5,.5);

　　box-sizing: border-box

}

注意:C3有兼容性问题,使用时需要加私有前缀

时间： 2024-12-10 05:15:11

实现0.5px的一条线的相关文章

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

CSS3实现0.5px的边框

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

android开发(33) 自定义 listView的分割线（使用xml drawable画多条线）

我遇到这样一个场景,我需要自定义 listView的分割线,而这个分割线是由两条线组成的,在使用xml drawable时遇到了困难. 注释:画两条线是为了实现凹陷的效果,在绘图中一条暗线紧跟着一条明显会给人视觉上产生明显的“沟”的感觉. 因为我的背景是透明(背景渐变)的,直接用图片来实现效果不好. 看看效果: 使用 layer-list 来实现. layer-list 可以包含多个item,每个item堆叠在一起. layer-list 的item可以设置间距,使用 android:b

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

jQuery实现每隔几条元素增加1条线的方法

1 $(".list2 li:nth-child(10n)").after('<li style="margin:10px 0px;border-bottom:1px dashed #ccc;"></li>'); 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DT

自定义View画一条线

#import "PublishContextView.h" @implementation PublishContextView -(void)drawRect:(CGRect)rect{ [super drawRect:rect]; CGContextRef context=UIGraphicsGetCurrentContext();//获得当前上图形线文 CGContextMoveToPoint(context, 0, rect.size.height);//设置起点 CGCon

highcharts 一图绘制多条线

1. yAxis增加一个标题 yAxis: [{ max:{$pe.maxCatArr.{$catlog}.avg}, // 定义Y轴最大值 min:0, // 定义最小值 minPadding: 0.01, maxPadding: 0.01, tickInterval:{$pe.maxCatArr.{$catlog}.avgtickInterval}, // 刻度值 title: { text: '耗时' }, plotLines: [{ //一条延伸到整个绘图区的线,标志着轴中一个特

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

9.7数学与概率（四）——在二维平面上，有一些点，请找出经过点数最多的那条线

/** * 功能:在二维平面上,有一些点,请找出经过点数最多的那条线. /** * 思路:在任意两点之间画一条无线长的直线,用散列表追踪那条直线出现的次数最多.时间复杂度O(N*N) * 注意: * 1)用斜率和y轴截距来确定是否是同一条直线. * 2)浮点数不一定能用二进制数准确表示,因此检查两个浮点数的差值是否在某个极小值(epsilon)内. * 3)对于散列表而言,斜率相等,未必散列值相同.因此,将斜率减去一个极小值,并以得到的结果flooredSlope作为散列键. * 4)取得所有可