Web前端绘制0.5像素的几种方法


Posted in HTML / CSS onAugust 11, 2017

最近完成了公司安排的移动web触屏开发,期间涉及到在移动设备上显示线条,最开始采用PC常用的css board属性来显示1个像素的线条,但是发现在移动设备上并不美观,参考淘宝、京东的触屏发现它们均是采用浅细的线条来显示在移动设备上。

以下纪录了比较方便的4种绘制0.5像素线条方式

一、采用meta viewport的方式,这个也是淘宝触屏采用的方式

常用的移动html viewport的设置如下

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
具体意思就不多提,它就是让页面的高宽度即为设备的高宽像素,而为了方便绘制0.5像素的viewport的设置如下

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no" />
这样html的宽高就是设备的2倍,此时依然使用css board为1像素的话,肉眼看到页面线条就相当于transform:scale(0.5)的效果,即为0.5像素

但是这种方式涉及到页面整体布局规划以及图片大小的制作,所以若采用这个方式还是事先确定为好

二、采用 border-image的方式

这个其实就比较简单了,直接制作一个0.5像素的线条和其搭配使用的背景色的图片即可

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>boardTest</title>
    <style>
            p{
                margin: 50px auto;
                padding: 5px 10px 5px 10px;
                color: red;
                text-align: center;
                width: 60px;
            }
            p:first-child{
                border-bottom: 1px solid red;
            }
            p:last-child{
                border-width: 0 0 1px 0; border-image: url("img/line_h.gif") 2 0 round;
            }
    </style>
<body>
    <div>
        <p>点击1</p>
        <p>点击2</p>
    </div>
</html>

三、采用background-image的方式

我这里采用的是渐变色linear-gradient的方式,代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>boardTest</title>
    <style>
            p{
                margin: 50px auto;
                padding: 5px 10px 5px 10px;
                color: red;
                text-align: center;
                width: 60px;
            }
            p:first-child{
                border-bottom: 1px solid red;
            }
            p:last-child{
                background-image: -webkit-linear-gradient(bottom,red 50%,transparent 50%);
                background-image: linear-gradient(bottom,red 50%,transparent 50%);
                background-size:  100% 1px;
                background-repeat: no-repeat;
                background-position: bottom right;     
    </style>
</head>
<body>
    <div>
        <p>点击1</p>
        <p>点击2</p>
    </div>
</body>
</html>

linear-gradient(bottom,red 50%,transparent 50%);的意思是从底部绘制一个渐变色,颜色为红色,占比为50%,而总宽度已经设置为100%而总高度为一个像素background-size:  100% 1px;

这样显示出来就是0.5像素的线条

四、采用transform: scale()的方式

就是将绘制出来的线条的高度进行半倍的缩放,代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>boardTest</title>
    <style>
            p{
                margin: 50px auto;
                padding: 5px 10px 5px 10px;
                color: red;
                text-align: center;
                width: 60px;
            }
            p:first-child{
                border-bottom: 1px solid red;
            }
            p:last-child{
                position: relative;
            }
            p:last-child:after {
                position: absolute;
                content: '';
                width: 100%;
                left: 0;
                bottom: 0;
                height: 1px;
                background-color: red;
                -webkit-transform: scale(1,0.5);
                transform: scale(1,0.5);
                -webkit-transform-origin: center bottom;
                transform-origin: center bottom
            }
        
    </style>
</head>
<body>
    <div>
        <p>点击1</p>
        <p>点击2</p>
    </div>
</body>
</html>

 以上就是小编为大家整理出来的Web前端绘制0.5像素的几种方法,希望对大家的学习能够起到帮助~

HTML / CSS 相关文章推荐
css3截图_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
Nov 11 HTML / CSS
推荐一些比较有用的css3新属性
Nov 11 HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
Nov 30 HTML / CSS
微信浏览器取消缓存的方法
Mar 28 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 HTML / CSS
如何利用input事件来监听移动端的输入
Apr 15 HTML / CSS
总结html5自定义属性有哪些
Apr 01 HTML / CSS
css3 box-shadow阴影(外阴影与外发光)图示讲解
Aug 11 #HTML / CSS
css3之UI元素状态伪类选择器实例演示
Aug 11 #HTML / CSS
CSS3系列之3D制作方法案例
Aug 14 #HTML / CSS
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 #HTML / CSS
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
Aug 18 #HTML / CSS
详解CSS3开启硬件加速的使用和坑
Aug 21 #HTML / CSS
前端面试必备之CSS3的新特性
Sep 05 #HTML / CSS
You might like
PHP 裁剪图片成固定大小代码方法
2009/09/09 PHP
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
linux iconv方法的使用
2011/10/01 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
javascript Base类 包含基本的方法
2009/07/22 Javascript
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
AngularJS实现根据变量改变动态加载模板的方法
2016/11/04 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
详解webpack的proxyTable无效的解决方案
2018/06/15 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
Python制作刷网页流量工具
2017/04/23 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
python实现简易学生信息管理系统
2020/04/05 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
python中的错误如何查看
2020/07/08 Python
旅游管理本科生求职信
2013/10/14 职场文书
美德好少年事迹材料
2014/01/19 职场文书
订货会主持词
2015/07/01 职场文书
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL