html5给div设置单边界,纯CSS实现border的0.5px设置-程序员宅基地

技术标签: html5给div设置单边界  

移动开发现在占据着越来越大的前端开发比例,所以对于移动端WEB页的要求也越来的越多,比如很多的H5页面,在设计出来时,看起来更像是一个原生的APP页面,而我这里想说的一个点就是,在H5页面中,关于分隔线的问题,我们可以看到,很多的APP中,区域的border的分割线,都是一条很细很细的线,接下来,我们就来说说这些细线的问题。

概述

在这之前,我们要先知道一个问题,那就是在浏览器中,对于元素设置的某些数据设置成浮点型,那么浏览器的表现时不同的,比如,我们可以这样最简单的设置,给一个div元素,设置一个height:0.5px的属性,可以在不同的浏览器下看看到不同的效果,这里不对这个进行总结,我们这里只来说说在移动端的情况。

这个时候,IOS的Safari表现就无疑是更好的,safari是可以支持浮点型的属性的,所以,如果想要在IOS的系统中,出现这样的0.5px的border宽度,是可以直接使用border的,而在Andriod下,就变的麻烦了,Andriod的系统(我见过的一些安卓机)的浏览器,会对浮点型数据执行四舍五入的情况,即你给元素设置border-width:0.5px,那么其表现与你设置border-width:1px;是相同的,而这个时候,就需要一些特殊的方法,来实现这个0.5px的border的值。

解决方案

这里的解决方案,我只把我知道的来说明一下:

1:使用png图片,设置元素的backgroun

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_32284931/article/details/118402066

智能推荐

Groovy & Groovy框架Grails-程序员宅基地

文章浏览阅读330次。Groovy百度百科:http://baike.baidu.com/view/707298.htm官方网站 :http://groovy.codehaus.org Groovy框架Grails Grails是一套用于快速Web应用开发的开源框架,它基于Groovy编程语言,并构建于Spring、Hibernate和其它标准Java框架之上,从而为大家带来一套能实现超高生..._groovy语言的第三方框架

stl equal_range的比较器这样用_std::equal_range 自定义比较-程序员宅基地

文章浏览阅读86次。stl equal_range的比较器不是我以为的那样,看过源码,查了别人的资料才了解我以为equal_range的比较器一定是[](val a, val b){return a == b;}, 实际上,它跟sort的比较器是一样的。是[](val a, val b){return a < b;}(假如升序排列的话)。看源码,先二分找到一个it, 此it符合如下条件:!_Pre(*it, val) && !Pre(val, *it),翻译成汉语的话就是,*it == val, _std::equal_range 自定义比较

javascript引擎spidermonkey再linux下的安装(转载)-程序员宅基地

文章浏览阅读223次。inux SpiderMonkey 编译 安装 使用小结2010-12-20 10:58:25标签:spiderMonkey终于还是开始着手Browser History Sniffing的检测工作了,前期的实例准备、相关工作调研已经有了较为充足的准备,下面要做的工作主要就是寻找解释javascript的利器以及对其的检测方法,接下来的日子里日志主要记录这方面的工作了。今天下载..._linux系统javascript引擎

SpringBoot Redis序列化配置_springboot redis 序列号配置-程序员宅基地

文章浏览阅读1.5k次。Redis配置#Redisspring.redis.host=spring.redis.port=6379spring.redis.database=0# Redis服务器连接密码(默认为空)spring.redis.password=# 连接池最大连接数(使用负值表示没有限制)spring.redis.pool.max-active=1500# 连接池最大阻塞等待时间(使..._springboot redis 序列号配置

Android关于cpu/cpuset/schedtune的应用_stune安卓是什么意思-程序员宅基地

文章浏览阅读1.9k次。Android中关于cpu/cpuset/schedtune的应用都是基于进程优先级的,根据不同优先级划分进程类型。AMS(ActivityManagerService)和PMS(PackageManagerService)等通过class Process设置进程优先级、调度策略等;android/osProcess JNI通过调用libcutils.so/libutils.so执行getprio..._stune安卓是什么意思

RouterOS的NTP Server设置-程序员宅基地

文章浏览阅读3k次。/system scheduler add interval=30m name=check_time_servers on-event="/system ntp client set enabled=yes mode=unicast primary-ntp=[:resolve 0.asia.pool.ntp.org] secondary-ntp=[:resolve 1.europe.pool.nt..._routeros ntp server

随便推点

Jupyterlab安装_jupyterlab怎么安装-程序员宅基地

文章浏览阅读2.1w次,点赞5次,收藏15次。Jupyter小结具体见个人Python图书馆:https://ds-ebooks.github.io安装JupyterLab使用pip安装:pip install jupyterlab# 必须将用户级目录添加 到环境变量才能启动pip install --userbinPATHjupyter lab使用以前版本的Notebook安装:jupyter ser..._jupyterlab怎么安装

js原生方法document.execCommand()复制到粘贴板_document.execcommand 复制粘贴-程序员宅基地

文章浏览阅读906次。一键复制后面的按钮把前面的文字复制到剪切板上,代码如下:<div class="copyText" v-if="wxResultPage.wechatID"> 微信号: {{wechatID}} <span @click="copy(wechatID)">一键复制</span></div><script> import { Toast } from 'mand-mobile' export defaul_document.execcommand 复制粘贴

十大排序算法图解-程序员宅基地

文章浏览阅读2.5k次,点赞48次,收藏219次。排序基础知识排序的定义排序, 就是重新排列表中的元素, 使表中的元素满足按关键字递增或递减的过程。为了査找方便,通常要求计算机中的表是按关键字有序的 。 排序的确切定义如下:输 入: n个 记 录 R1,R2,R3…Rn, 对对应的关键字为K1,K2,K3…Kn输出: 输入序列的一个重排R1’,R2’,R3’…Rn’, 使得有K1’ ≤ K2’ ≤ K3’… ≤ Kn’ (其中 ≤可以换成..._十大排序算法图

SQL WEEK()函数-程序员宅基地

文章浏览阅读1.9w次。WEEK(date[,mode])函数说明此函数返回日期的周数。双参数的形式WEEK()允许你指定星期是否开始于周日或周一,以及是否返回值应在范围从0到53或从1到53。 如果省略了mode参数,系统default_week_format变量的值被使用。 Mode 一个星期的第一天 范围 Week 1 是第一个星期 ..._sql week

转 -- 基于DDS的Oracle灾备方案_基于dds的备份-程序员宅基地

文章浏览阅读1.1k次。其实这个页面不是完整的。 原址如下: http://space.itpub.net/9293119/viewspace-689446 【oracle灾备方案系列】基于DDS的Oracle灾备方案(一) 1. 引言在企业信息化进程不断加快的今天,保持业务的持续性是企业用户进行数据存储时必须考虑的重要方面。灾难的出现,可能导致生产停顿、客户满意度降低,企业的竞争力会因_基于dds的备份

浅谈Java内部类(超详细代码示例)_人打电话依赖手机内部类关系代码java-程序员宅基地

文章浏览阅读162次。浅谈Java内部类(超详细代码示例)_人打电话依赖手机内部类关系代码java

推荐文章

热门文章

相关标签