前端页面细节处理好了才会显得精致。边框在网页中是常见的一种样式了。虽然不把它处理为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. leetCode 42.Trapping Rain Water(凹槽的雨水) 解题思路和方法

    Trapping Rain Water Given n non-negative integers representing an elevation map where the width of e ...

  2. ormlite操作表记录

    实体类的创建对应表中people表, @DatabaseTable(tableName="people") public class People { @DatabaseField ...

  3. uva10401Injured Queen Problem(递推)

    题目:uva10401Injured Queen Problem(递推) 题目大意:依然是在棋盘上放皇后的问题,这些皇后是受伤的皇后,攻击范围缩小了.攻击范围在图中用阴影表示(题目).然后给出棋盘的现 ...

  4. PHP文件系统处理

    文件系统概述 文件类型         PHP是以UNIX的文件系统为模型的,因此Windows系统中我们只能获得"file"."dir"或者"unk ...

  5. Nginx如何保留真实IP和获取前端IP

    原理: squid,varnish以及nginx等,在做反向代理的时候,因为要代替客户端去访问服务器,所以,当请求包经过反向代理后,在代理服务器这里这个IP数据包的IP包头做了修改,最终后端web服务 ...

  6. Sublime Text 包管理工具及扩展大全

    Sublime Text 是程序员们公认的编码神奇,拥有漂亮的用户界面和强大的功能,例如代码缩略图,多重选择,快捷命令等.还可自定义键绑定,菜单和工具栏.Sublime Text 的主要功能包括:拼写 ...

  7. Android自定义控件-折线图

    好长时间没有更新博客了,终于可以抽出时间写点东西了,写点什么呢?最近在qq群里边有人问,下边的这个控件怎么画?如下图所示:图可以左右拖动,直到显示完全为止.刚开始看到这个效果图,我也想了一下总共分为以 ...

  8. Centos网络时好时超时问题解决

    近期公司使用的Centos突然出现网络不稳定现象,有公网,内部可以PING通外网,但是外部PING这个IP时,经常丢包现象,而且一丢包就是连续性的长达七八次,甚至十几次. 这个问题折腾了很长时间,因为 ...

  9. EMQ配置

    参考官方配置页面:http://emqtt.com/docs/v2/tune.html Linux 操作系统参数系统所有进程可打开的文件数量官方配置: sysctl -w fs.file-max=20 ...

  10. vector 类简介和例程

    一.标准库的vector类型 vector是同一种类型的对象的集合 vector的数据结构很像数组,能非常高效和方便地访问单个元素 vector是一个类模板(class template) vecto ...