css写出0.5px边框(一)
在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0.5px边框
1.
html部分
<div class="border">测试0.5px边框</div>
css部分
.border{
position: relative;
color: #555;
font-size: 14px;
line-height: 41px;
width:200px;
}
.border:after{
height: 1px;
content: '';
width: 100%;
border-bottom: 1px solid #e8e8e8;
position: absolute;
bottom: -1px;
right: 0;
transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
z-index: 10;
}
用添加伪元素的方法添加下边框,再利用transform在y轴缩小1倍
2.
.border{
width:200px;
color: #555;
font-size: 14px;
line-height: 41px;
border-bottom: 1px solid transparent !important;
-webkit-border-image: url("../img/line-bottom.png") 2 0 stretch;
border-image: url("../img/line-bottom.png") 2 0 stretch;
-o-border-image: url("../img/line-bottom.png") 2 0 stretch;
-moz-border-image: url("../img/line-bottom.png") 2 0 stretch;
border-width: 0 0 1px;
}
line-bottom.png 是宽1px 高2px的小图片,1px透明,1px用border的颜色,这样也能写出1px边框,优点,如果用less或者sass,可以定义成公用的,引用方便,缺点:换颜色要换图片
css写出0.5px边框(一)的更多相关文章
- css3写出0.5px的边框
一说到0.5px的边框,我们一般认为是不行的,因为在ps中0.5px的线也是做不出来的,这个计算机的像素有关系. 废话不多说了,0.5px 其实用的是css3新特性,box-shadow:阴影设置 代 ...
- css写出三角形(兼容IE)
css写出三角形 利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; bo ...
- 实现0.5px边框线
实现0.5px边框方法 方案一:利用渐变(原理:高度1px,背景渐变,一半有颜色,一半透明) CSS部分 .container { width: 500px; margin: 0px auto; } ...
- [转]retina屏下支持0.5px边框的情况
2014-12-31更新:截至到IOS8.1,safari仍不支持@supports待safari支持@supports, 就可以利用0.5px了! 2014-7-25更新:1. 修正dpr = 1. ...
- div背景透明内容不透明与0.5PX边框兼容设置
1.问题:设置 border-width:0.5px; 并兼容安卓和苹果移动端. 兼容:苹果IOS的 safari 支持浮点数边框,安卓浏览器不支持,会四舍五入到1px.不同浏览器效果额不同 解 ...
- html+css写出类似word目录样式的内容
word目录的格式里这种很常见,要用html+css写出来刚开始还有点懵. 左右两边都是内容撑开宽度,中间内容的宽度也不是确定的,也是随着左右两边的内容动态变化的. 最终解决思路是,给右边内容加上白色 ...
- CSS3实现0.5px边框
用CSS设置边框宽度为0.5px,可以使边框看起来更加细腻,特别是在移动端,设计师会有这样的要求. 但遗憾的是,大多数Android手机并不能识别0.5px.因此我们可以使用CSS3来变通的实现0.5 ...
- 纯HTML+CSS写出一颗会飘动的树,有没有惊艳到你呢?
前言 使用HTML+CSS能写出什么惊人的效果呢? 针对这个问题,我总会看到类似的回答,比如没有JS,前端永远都是静态的:HTML5要搭配JS,要不然一文不值. JS固然强大,但CSS也并非一文不值, ...
- 用纯css写出三角形
1.新建一个元素,随便什么元素,不过我习惯性的会用块元素来做.如果行内元素就display:block它.<div class="triangle"></div& ...
随机推荐
- eclipse报错“Undefined variable from import: ...”解决方案
环境 eclipse + pydev2.8.2 + python 3.5.1/python 2.7.11 + wxpython3.0 出现原因:原先默认解释器设置为python2,重装了pydev之后 ...
- python安装、模块安装
python安装 windows 下载安装包 https://www.python.org/downloads 改环境变量 [右键计算机]-->[属性]-->[高级系统设置]-->[ ...
- JS 小数的常用处理方法
1.丢弃小数部分,保留整数部分 parseInt(5/2) 2.向上取整,有小数就整数部分加1 Math.ceil(5/2) 3,四舍五入. Math.round(5/2) 4,向下取整 Math.f ...
- canvas-炫丽的倒计时效果Canvas绘图与动画基础
canvas 是基于转台来绘制的 来了解一下canvas的浏览器兼容性问题,如下图所示.(截图自can i use) tips:刚刚拿去ie8下测了一下,什么反应都没有,提前设定好的,如果该浏览器不支 ...
- List接口方法使用(PS:Java 编程思想阅读小结)
1.用代码说话 package JavaProject; import java.util.*; public class A{ public static void main(String[]arg ...
- Windows下搭建PHP开发环境
PHP集成开发环境有很多,如XAMPP.AppServ......只要一键安装就把PHP环境给搭建好了.但这种安装方式不够灵活,软件的自由组合不方便,同时也不利于学习.所以我还是喜欢手工搭建PHP开发 ...
- 报错:init: Could not find wglGetExtensionsStringARB!
如下操作即可恢复:
- Linux C++中的时间函数(转)
http://net.pku.edu.cn/~yhf/linux_c/function/03.html asctime(将时间和日期以字符串格式表示) 相关函数 time,ctime,gmtime ...
- leetcode--Maximum Subarray
题目链接:https://leetcode.com/problems/maximum-subarray/ 算法类型:动态规划 题目分析:最大序列和 代码实现: class Solution(objec ...
- 【学习笔记】C语言之词法规则
一.字符 标准并没有规定C环境必须使用特定的字符集,但是它规定了字符集必须包含英语所有的大小写字母,数字0到9,以及下面的字符: ! # % ^ & * ( ) _ – + = / . ? ...