css 0.5px
1. 利用css3新属性scale(好用推荐)
其实现的关键就是利用before或after伪元素,宽高同时设为200%,然后再缩放0.5,自然就是0.5px了
代码如下:
div {
positon : relative;
}
div::after {
content : "";
width : 200%;
height : 200%;
position : absolute;
top :;
left :;
border : 1px solid #dedede;
-webkit-transform : scale(0.5);
transform : scale(0.5);
-webkit-transform-origin : 0 0;
transform-origin : 0 0;
box-sizing: border-box;
}
2. 利用background-image
如果你问切图直接用背景图可不可以?当然可以,虽说这种方法比较笨吧,但也是一种方法。
但我要说的是另外一种--利用背景渐变linear-gradient来实现,具体代码如下:
.bg_border {
background-image : linear-gradient(0deg,red,red 50%,transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
}
分析:linear-gradient默认方向从上到下,从0deg到50%的地方颜色是边框颜色,然后下边一半颜色就是透明了-没颜色。中间之所以两个50%写在一起,是因为这样就不会有颜色过渡的渐变效果了,看起来更像一条线,泾渭分明; 然后最关键的是下边的background-size: 100% 1px,就是宽度100%,但高度是1px,注意这里的1px自然是css像素了,加上上边的background-image,实际效果就是一半有颜色,一半那不就是0.5px,然后再去掉repeat,就实现了。
同理如果要写border-left或border-right一样的原理,只需改变方向就可以了。
缺点: 只能做但方向的border,如果有个按钮要加,而且还有圆角,那就无能为力了
css 0.5px的更多相关文章
- CSS 0.5px 细线边框的原理和实现方式
细线边框的具体实现方法有:伪元素缩放或渐变,box-shadow模拟,svg画线,border-image裁剪等.要实现小于1px的线条,有个先决条件:屏幕的分辨率要足够高,设备像素比要大于1,即cs ...
- css写出0.5px边框(一)
在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...
- css给div添加0.5px的边框
具体代码实现如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- CSS画0.5px的线
今天遇到一个需求,画0.5px的线,查了以下资料,主要以scale方法为主.代码如下: /*0.5px上边框*/ .half_top_border_before:before{ content: &q ...
- [转]retina屏下支持0.5px边框的情况
2014-12-31更新:截至到IOS8.1,safari仍不支持@supports待safari支持@supports, 就可以利用0.5px了! 2014-7-25更新:1. 修正dpr = 1. ...
- 移动端页面0.5px border的实现
移动端上经常发现1px边框异常的粗,因此,决定用伪类配合css3来实现0.5px边框 代码如下: <!doctype html> <html lang="en"& ...
- hairline!ios实现边框0.5px
在2014WWDC上,Ted O’Connor提出了“retina hairlines”的解决方案,即在ratina屏幕上可以显示0.5px宽度的边框.他的方案是这样的: 1 Standard bor ...
- 如何实现border-width:0.5px;
工作中遇到了一个产品需求,要求把列表分割线改成0.5px,直接写成border:0.5px solid #cccccc;是不符合规范的写法,会存在Android和IOS手机上的兼容问题,故,我们可以利 ...
- 移动端 Retina屏border实现0.5px
首先来看一下造成Retina边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRat ...
随机推荐
- @Html.Raw() 方法输出带有html标签的字符串
@Html.Raw() 方法输出带有html标签的字符串,如:@Html.Raw("<div style='color:red'>输出字符串</div>") ...
- Redux 总结
1.redux: function reducer(state=-,action) { switch(action.type) { case '': return ... case '': retur ...
- 变量对象、作用域链和This
变量对象 作用域链 This 整理自:https://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html 系列文章中变量对象,作用域链和this ...
- tensorflow学习之路-----MNIST数据
''' 神经网络的过程:1.准备相应的数据库 2.定义输入成 3.定义输出层 4.定义隐藏层 5.训练(根据误差进行训练) 6.对结果进行精确度评估 ''' import tensorflow as ...
- react入门安装
react的入门安装 1.react的适用方法有两种,其一是依赖在线的cdn地址: https://reactjs.org/docs/cdn-links.html 官方给的cdn地址如下 <sc ...
- Android NDK课程录制完毕上线
近期依据公司安排,录制了Android NDK开发的内容,总体课程能够在www.iotekclass.com上看到.兴许会慢慢的用blog把这些内容展示出来. 此课程大纲例如以下: 第一章 NDK简单 ...
- php将数组或字符串写入文件
//将数组保存在文件里 function export_to_file($file, $variable) { $fopen = fopen($file, 'wb'); if (!$fopen) { ...
- BZOJ 刷题记录 PART 5
拖了好久才写的. [BZOJ2821]接触分块大法.这道题略有点新颖.首先我们先分块.然后统计每块中每一个数出现的个数. 以下是联立各个方块,预处理出第I个方块到第J个方块出现正偶数次数的个数. fo ...
- julia/pyplot 绘图加入标签和标题
julia 调用matplotlib.pyplot 须要先using pycall 先安装pycall Pkg.add("PyCall") 然后吧. . . 上代码把:(应该是通俗 ...
- 55.npm install 报错 :stack Error: Can't find Python executable "python"
转自:https://www.cnblogs.com/zengry/p/8044379.html 解决方法 : 1. 安装python , 设置环境变量 :cmd --> path='%path ...