android 极细线
最后找到一个还算好用的方法:伪类 + transform
原理是把原先元素的 border 去掉,然后利用:before或者:after重做 border ,并 transform 的 scale 缩小一半,原先的元素相对定位,新做的 border 绝对定位 单条 border .hairlines li{
position: relative;
border:none;
}
.hairlines li:after{
content: '';
position: absolute;
left: ;
background: #;
width: %;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: ;
transform-origin: ;
} 四条 border .hairlines li{
position: relative;
border:none;
}
.hairlines li:after{
content: '';
position: absolute;
top: ;
left: ;
border-bottom: 1px solid #; //设置底边框极细线
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: %;
height: %;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
} //一般不用 样式使用的时候,也要结合 JS 代码,判断是否 Retina 屏 if(window.devicePixelRatio && devicePixelRatio >= ){
document.querySelector('ul').className = 'hairlines';
}
这样会影响点击事件,所以在可以点击的地方的z-index大于加了极细线的,这样加了极细线的地方就不会挡住它上面的可以点击的地方。
下面的方法没有尝试:
在app应用开发中,我们常常都需要用到css3来设置应用的样式。由于app都是在移动设备上进行展示,所以边框描边的线一般都小于1px,而以往我们使用的都是1px及以上的。那么问题来了,对于小于1px的边框怎么处理呢?为大家介绍几种css3中细线边框的写法,希望对遇到类似问题的童鞋有帮助。
、做一张高2像素(1像素有颜色1像素没颜色)的图片做背景,bg-size设置宽100%,高1px
.line li{
background: url('line.png') left top no-repeat;
background-size: % 1px;
background-position: left bottom;}
<ul class="line">
<li></li>
<li></li>
<li></li>
</ul>
这种方法有一个问题,就是左右边框描边虽然可以做旋转(transform) ,但如果要是边框更换颜色那岂不是还要再做图片了;
、通过上面的方法,我们也很容易联想到线性渐变(linear-gradient),具体实现如下:
.line li{ border: none;
background-image: -webkit-linear-gradient(# %,transparent %);
background-image: -moz-linear-gradient(# %,transparent %);
background-image: -o-linear-gradient(# %,transparent %);
background-image: linear-gradient(# %,transparent %);
background-size: % 1px;
background-repeat: no-repeat;
background-position: bottom;}
<ul class="line">
<li>linear-gradient</li>
<li>linear-gradient</li>
<li>linear-gradient</li>
</ul>
这种方法仍然不够完美,改变描边位置(left,top,right,bottom)时需要修改参数,如 left描边需要改变:
background-image: -webkit-linear-gradient(left ,transparent %,# %);
background-size: 1px %;
background-position: left; 、那还有什么方法可以解决细线边框问题呢?我们不妨可以试试了CSS3阴影(box-shadow),用阴影做描边然后用伪类把多余的给遮罩着:
.line li{box-shadow: inset -1px 1px #;background: #fff;margin-left: -1px;margin-bottom: 10px;position: relative;}
.line li::after{content:'';position: absolute;top:;left: 0px;right: 0px;bottom: 0px;border: 1px solid #fff;}
<ul class="line">
<li>box-shadow</li>
<li>box-shadow</li>
<li>box-shadow</li>
</ul> 虽然,小编分享的几种方法都还存在瑕疵,具体使用哪种方法,你可以根据你的情况而定。如果你有更完美的解决方案的话,也欢迎分享出来,大家一起学习,一起进步。
android 极细线的更多相关文章
- android 多线程下载 断点续传
来源:网易云课堂Android极客班第八次作业练习 练习内容: 多线程 asyncTask handler 多线程下载的原理 首先获取到目标文件的大小,然后在磁盘上申请一块空间用于保存目标文件,接着把 ...
- 选择Android还是IOS开发?
选择Android还是IOS? 随着移动互联网的如日中天,涌现了越来越多的开发者.IOS优秀的用户体验,Android极高的用户群,这对于开发者来说陷入了选择困难的境地,尤其是新入门的开发者,精力有限 ...
- 极简Unity调用Android方法
简介 之前写了篇unity和Android交互的教程,由于代码里面有些公司的代码,导致很多网友看不懂,并且确实有点小复杂,这里弄一个极简的版本 步骤 废话不多说,直接来步骤吧 1.创建工程,弄大概像这 ...
- 极简的Android RecyclerView Adapter(使用DataBinding)
阅读本篇文章需要读者对Android Databinding和RecyclerView有一定的了解. 简介 我们知道,DataBinding的核心理念是数据驱动.数据驱动驱动的目标就是View,使用D ...
- Android的WebView控件载入网页显示速度慢的究极解决方案
Android的WebView控件载入网页显示速度慢的究极解决方案 [转载来源自http://hi.baidu.com/goldchocobo/] 秒(甚至更多)时间才会显示出来.研究了很久,搜遍了国 ...
- Android开发学习之路-Git的极简教程?
Git是一个代码版本管理工具,也就是允许我们的一个项目拥有多个版本,这样我们可以随心所欲的修改我们的代码,如果出现问题,可以回退到某一个提交点.如果你还在用一堆堆注释来更新你的代码,那么可以尝试一下G ...
- Android zxing 解析二维码,生成二维码极简demo
zxing 官方的代码很多,看起来很费劲,此demo只抽取了有用的部分,实现了相机预览解码,解析本地二维码,生成二维码三个功能. 简化后的结构如下: 废话少说直接上代码: BaseDecodeHand ...
- android Xml生成一条细线,以及获取屏幕宽度和高度
<View android:layout_width="match_parent" android:layout_height="2dip" androi ...
- 【转】Android的WebView控件载入网页显示速度慢的究极解决方案
秒(甚至更多)时间才会显示出来.研究了很久,搜遍了国外很多网站,也看过PhoneGap的代码,一直无解. 一般人堆WebView的加速,都是建议先用webView.getSettings().setB ...
随机推荐
- 在 Eclipse 中使用 C++
安装 安装Eclipse Eclipse下载页 能够选择Eclipse IDE for C/C++ Developers(内置CDT插件) 也能够选择安装其它版本号之后再安装CDT插件. 安装CDT插 ...
- UVA 1541 - To Bet or Not To Bet 记忆化DP概率
Alexander Charles McMillan loves to gamble, and during his last trip to the casino he ran across a n ...
- BZOJ 1790: [Ahoi2008]Rectangle 矩形藏宝地
BZOJ 1790: [Ahoi2008]Rectangle 矩形藏宝地 题目传送门 [题目大意] 游戏的主办方把这块开阔地当作第一象限,将所有可能埋藏宝藏的地方划成一个个矩形的土地,并把这些矩形土地 ...
- NOIp2018之前打模板出现的问题汇总
灵感来源是因为调试了一下午dij,就想把错误记下来 dij:结构体里的重载运算符不会写 结构体声明后要加引号 用于排序的结构体按照边长度排序 匈牙利:在dfs中的if语句中,要继续搜 ...
- 基于任务的编程模型TAP
一.引言 在上两个专题中我为大家介绍.NET 1.0中的APM和.NET 2.0中的EAP,在使用前面两种模式进行异步编程的时候,大家多多少少肯定会感觉到实现起来比较麻烦, 首先我个人觉得,当使用AP ...
- Chrome 开发工具系列
- Android WebView访问网站携带登录认证Cookies和动态自定义的cookies
最近项目几个页面要复用微信程序的网页.但是需要调用微网站登录接口,返回Cookies,webview访问需要的网页的时候携带. 并且还需要几个其他的动态改变的cookie,目的是根据这几个动态自定义c ...
- 对ListView的Item子控件监听并跳转页面
public class MyAdapteforOwner extends BaseAdapter{ List<OwnerDevice>datas; private Context con ...
- 【摘录】JAVA内存管理-自动选择垃圾收集器算法
在J2SE 5.0,垃圾收集的默认值:垃圾收集器.堆大小以及JVM的类型(客户端还是服务器)都会根据应用运行的硬件平台和操作系统自动选择.相比之前设置命令行参数的方式,自动选择很好的匹配了不同类型的应 ...
- PHP魔术方法__clone()篇
PHP中定义了一个内置方法__clone()来调整兑现的克隆行为: 当一个对象被克隆的时候会自动执行__clone()方法,而复制的对象可以在其方法内进行调整 header('Content-type ...