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弹性伸缩布局之box布局
Jul 12 HTML / CSS
一款利用html5和css3实现的3D立方体旋转效果教程
Apr 26 HTML / CSS
关于CSS Tooltips(鼠标经过时显示)的效果
Apr 10 HTML / CSS
初探CSS3中的calc()功能
Jul 14 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
May 05 HTML / CSS
深入理解css中vertical-align属性
Apr 18 HTML / CSS
HTML5 video视频字幕的使用和制作方法
May 03 HTML / CSS
X/HTML5 和 XHTML2
Oct 17 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
Apr 25 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
Jun 01 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
Apr 22 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
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
JS 控制小数位数的实现代码
2011/08/02 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
js实现简单模态框实例
2018/11/16 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
python在Windows下安装setuptools(easy_install工具)步骤详解
2016/07/01 Python
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
Python如何测试stdout输出
2020/08/10 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
JAVA代码查错题
2014/10/10 面试题
市场部管理制度
2014/02/02 职场文书
会计助理岗位职责
2014/02/17 职场文书
护理专科自荐书范文
2014/02/18 职场文书
人资专员岗位职责
2014/04/04 职场文书
销售求职信范文
2014/05/26 职场文书
监考失职检讨书
2015/01/26 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书