前端页面细节处理好了才会显得精致。边框在网页中是常见的一种样式了。虽然不把它处理为0.5px看上去没毛病，但是想让你做的东西征服更多的人，这些细节处理是必须的。

今天主要说一下如何让边框显示0.5px的方法：

方法一：利用渐变

关于渐变可以看下面两篇文章做深入了解：

CSS3 渐变（Gradients）

深入理解CSS3 gradient斜向线性渐变

实现原理：

把元素的伪类高度设为1px,背景渐变，一半有颜色，一半透明。
 
线上案例：百度糯米（没有改版的话）
 
代码如下：
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>边框0.5px实现方法</title>

        <style type="text/css">

            .container{

                width: 500px;

                margin: 0px auto;

            }

            .border-gradient{

                position:relative;

                padding: 10px;

            }

            .border-gradient:after {

                content: " ";

                position: absolute;

                left: 0;

                bottom: 0;

                width: 100%;

                height: 1px;

                background-image: linear-gradient(0deg, #f00 50%, transparent 50%);

            }

        </style>

    </head>

    <body>

        <div class="container">

            <h3>方案一：渐变</h3>

            <div class="border-gradient">

                原理：高度1px,背景渐变，一半有颜色，一半透明。

            </div>

        </div>

    </body>

</html>
方法二：利用缩放
原理：transform:scale()来达到压缩一半的目的。
 
线上案例：京东
 
代码如下：
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>边框0.5px实现方法</title>

        <style type="text/css">

            .container{

                width: 500px;

                margin: 0px auto;

            }

            .border-scale{

                position:relative;

                padding: 10px;

            }

            .border-scale:after{

                content: "  ";

                position: absolute;

                left: 0;

                bottom: 0;

                width: 100%;

                height: 1px;

                background-color: #f00;

                /* 如果不用 background-color, 使用 border-top:1px solid #f00; 效果是一样的*/

                -webkit-transform: scaleY(.5);

                transform:scaleY(.5);

            }

        </style>

    </head>

    <body>

        <div class="container">

            <h3>方案二：使用缩放</h3>

            <div class="border-scale">

               原理： 在Y轴方向上，压缩一半。

            </div>

        </div>

    </body>

</html>
拓展：4条边框都需要
原理：也是利用transform:scale()，只不过这次缩放的是整个内容。
代码如下：
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>边框0.5px实现方法</title>

        <style type="text/css">

            .container{

                width: 500px;

                margin: 0px auto;

            }

     　　　　.border-all{

                position:relative;

                padding: 10px;

            }

            .border-all:after{

                content: "  ";

                position: absolute;

                left: 0;

                top: 0;

                z-index:-1;

                width: 200%;

                height:200%;

                border:1px solid #f00;

                -webkit-transform-origin: 0 0;

                transform-origin: 0 0;

                -webkit-transform: scale(.5, .5);

                transform: scale(.5, .5);

                border-radius: 10px;

            }

        </style>

    </head>

    <body>

        <div class="container">

            <h3>拓展：四周全是0.5px的线条的话</h3>

            <div class="border-all">

               这是实现一个盒子四周0.5px的做法， 如果加入border-radius圆角效果，会发现，有些手机会有圆角发虚的情况，不过影响不是很大。如果有两个盒子，上面一个盒子没有边框效果，下面盒子有边框效果，两个盒子一样宽，上下在一起的布局方式，你会发现，在手机上有时候会对不齐… 错开了0.5px，原因已经很明了了…还有那个z-index ，可以根据不同需求来调整使用，如果可以的话，不使用也是可以的。

            </div>

        </div>

    </body>

</html>

其它文章推荐：

移动端1px细线解决方案总结

webapp中的CSS3实现 0.5px的细线

CSS3实现0.5px的边框的更多相关文章

  1. css3写出0.5px的边框

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

  2. CSS3实现0.5px边框

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

  3. CSS 0.5px 细线边框的原理和实现方式

    细线边框的具体实现方法有:伪元素缩放或渐变,box-shadow模拟,svg画线,border-image裁剪等.要实现小于1px的线条,有个先决条件:屏幕的分辨率要足够高,设备像素比要大于1,即cs ...

  4. 0.5px的边框

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. css给div添加0.5px的边框

    具体代码实现如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. css3 使用SVG做0.5px 的边框细线

    .HalfPixelLine{ background: repeat-x top left url("data:image/svg+xml;utf8,<svg xmlns='http: ...

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

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

  8. 移动端 Retina屏border实现0.5px

    首先来看一下造成Retina边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRat ...

  9. CSS画0.5px的线

    今天遇到一个需求,画0.5px的线,查了以下资料,主要以scale方法为主.代码如下: /*0.5px上边框*/ .half_top_border_before:before{ content: &q ...

随机推荐

  1. android源代码在线阅读

    http://grepcode.com/project/repository.grepcode.com/java/ext/com.google.android/android/

  2. [Python]datetime常用的几个操作

    #coding: utf-8 ''' 日期相关的操作 ''' from datetime import datetime from datetime import timedelta DATE_FMT ...

  3. 深入理解Git (三) － 微命令上篇

    1 git hash-object 曾经讲过Git用Hash值作为Git对象的名字,那么详细是哪个命令呢? 我们能够先改动一个文件: echo "hongchangfirst" & ...

  4. WPF显示经常使用的几个显示文字控件TextBox， TextBlock， Lable

    TextBox, TextBlock. Lable 当中TextBox 和Lable均继承了Control类 能够对其进行模板编辑. 而TextBlock没有继承Control所以不能对其进行模板编辑 ...

  5. Wince6.0模拟器下载和使用方法

    原文地址:http://www.oogps.com/post/Wince6.0.html下载地址:Wince6.0模拟器下载.rar 第一步:把软件下载解压后看到以下目录. 第二步:双击运行上图中的S ...

  6. 基于微信小程序的用户列表点赞功能

    代码地址如下:http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4.想 ...

  7. linux中echo的使用方法

    1.echo命令我们经常使用的选项有两个,一个是-n,表示输出之后不换行.另外一个是-e,表示对于转义字符按对应的方式处理,假设不加-e那么对于转义字符会按普通字符处理. 2.echo输出时的转义字符 ...

  8. C-常用构造哈希函数

    1.定址法(比如0-100岁的人数统计, 可以按年龄作为散列地址, 1980年后每年出生人数的统计, 可以把"年限 - 1980"作为散列地址) 2.取余法 3.数字分析法(比如一 ...

  9. sqlserver学习笔记（一）—— 登录本机sqlserver、启动和停止sqlserver服务、创建和删除数据库

    (重要参考:51自学网——SQL Server数据库教程) 首先按照网上教程安装好sqlserver,打开登录 登录本机sqlserver:①. ②localhost ③127.0.0.1 启动和停止 ...

  10. java web 解决Form表单乱码问题

    JSP和Servlet的六种中文乱码处理方法 一.表单提交时出现乱码: 在进行表单提交的时候,经常提交一些中文,自然就避免不了出现中文乱码的情况,对于表单来说有两种提交方式:get和post提交方式. ...