在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和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边框(一)的更多相关文章

  1. css3写出0.5px的边框

    一说到0.5px的边框,我们一般认为是不行的,因为在ps中0.5px的线也是做不出来的,这个计算机的像素有关系. 废话不多说了,0.5px 其实用的是css3新特性,box-shadow:阴影设置 代 ...

  2. css写出三角形(兼容IE)

    css写出三角形   利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; bo ...

  3. 实现0.5px边框线

    实现0.5px边框方法 方案一:利用渐变(原理:高度1px,背景渐变,一半有颜色,一半透明) CSS部分 .container { width: 500px; margin: 0px auto; } ...

  4. [转]retina屏下支持0.5px边框的情况

    2014-12-31更新:截至到IOS8.1,safari仍不支持@supports待safari支持@supports, 就可以利用0.5px了! 2014-7-25更新:1. 修正dpr = 1. ...

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

    1.问题:设置 border-width:0.5px;  并兼容安卓和苹果移动端.  兼容:苹果IOS的 safari 支持浮点数边框,安卓浏览器不支持,会四舍五入到1px.不同浏览器效果额不同  解 ...

  6. html+css写出类似word目录样式的内容

    word目录的格式里这种很常见,要用html+css写出来刚开始还有点懵. 左右两边都是内容撑开宽度,中间内容的宽度也不是确定的,也是随着左右两边的内容动态变化的. 最终解决思路是,给右边内容加上白色 ...

  7. CSS3实现0.5px边框

    用CSS设置边框宽度为0.5px,可以使边框看起来更加细腻,特别是在移动端,设计师会有这样的要求. 但遗憾的是,大多数Android手机并不能识别0.5px.因此我们可以使用CSS3来变通的实现0.5 ...

  8. 纯HTML+CSS写出一颗会飘动的树,有没有惊艳到你呢?

    前言 使用HTML+CSS能写出什么惊人的效果呢? 针对这个问题,我总会看到类似的回答,比如没有JS,前端永远都是静态的:HTML5要搭配JS,要不然一文不值. JS固然强大,但CSS也并非一文不值, ...

  9. 用纯css写出三角形

    1.新建一个元素,随便什么元素,不过我习惯性的会用块元素来做.如果行内元素就display:block它.<div class="triangle"></div& ...

随机推荐

  1. eclipse报错“Undefined variable from import: ...”解决方案

    环境 eclipse + pydev2.8.2 + python 3.5.1/python 2.7.11 + wxpython3.0 出现原因:原先默认解释器设置为python2,重装了pydev之后 ...

  2. python安装、模块安装

    python安装 windows 下载安装包 https://www.python.org/downloads 改环境变量 [右键计算机]-->[属性]-->[高级系统设置]-->[ ...

  3. JS 小数的常用处理方法

    1.丢弃小数部分,保留整数部分 parseInt(5/2) 2.向上取整,有小数就整数部分加1 Math.ceil(5/2) 3,四舍五入. Math.round(5/2) 4,向下取整 Math.f ...

  4. canvas-炫丽的倒计时效果Canvas绘图与动画基础

    canvas 是基于转台来绘制的 来了解一下canvas的浏览器兼容性问题,如下图所示.(截图自can i use) tips:刚刚拿去ie8下测了一下,什么反应都没有,提前设定好的,如果该浏览器不支 ...

  5. List接口方法使用(PS:Java 编程思想阅读小结)

    1.用代码说话 package JavaProject; import java.util.*; public class A{ public static void main(String[]arg ...

  6. Windows下搭建PHP开发环境

    PHP集成开发环境有很多,如XAMPP.AppServ......只要一键安装就把PHP环境给搭建好了.但这种安装方式不够灵活,软件的自由组合不方便,同时也不利于学习.所以我还是喜欢手工搭建PHP开发 ...

  7. 报错:init: Could not find wglGetExtensionsStringARB!

    如下操作即可恢复:

  8. Linux C++中的时间函数(转)

    http://net.pku.edu.cn/~yhf/linux_c/function/03.html   asctime(将时间和日期以字符串格式表示) 相关函数 time,ctime,gmtime ...

  9. leetcode--Maximum Subarray

    题目链接:https://leetcode.com/problems/maximum-subarray/ 算法类型:动态规划 题目分析:最大序列和 代码实现: class Solution(objec ...

  10. 【学习笔记】C语言之词法规则

    一.字符 标准并没有规定C环境必须使用特定的字符集,但是它规定了字符集必须包含英语所有的大小写字母,数字0到9,以及下面的字符: ! # % ^ & * ( ) _ – + =  / . ? ...