html怎么添加5px高的线,CSS 0.5px 细线边框的原理和实现方式
细线边框的具体实现方法有:伪元素缩放或渐变,box-shadow模拟,svg画线,border-image裁剪等。要实现小于1px的线条,有个先决条件:屏幕的分辨率要足够高,设备像素比要大于1,即css中的1个像素对应物理屏幕中1个以上的像素点。
对于普通电脑,屏幕物理像素和css像素一一对应,显示的最小单位就是1px。而现在的手机,屏幕物理宽度一般都大于页面显示宽度。例如苹果6s的屏幕分辨率为1334x750像素,但是以375px的宽度显示页面,设备像素比就是750/375=2;此时在css中定义0.5px的宽度,实际上对应物理屏幕的1个像素点,这就是border小于1px的的实现基础。
@media only screen and (-webkit-min-device-pixel-ratio: 2){
.fineLine{
-webkit-transform: scaleY(.5);
}
}
var dpr = window.devicePixelRatio;
// 如下方法精确计算出了物理设备与css的像素比dppx。但实际使用中dpr更广泛,也足以满足一般需求
var dppx = window.screen.width/(window.innerWidth || document.documentElement.clientWidth);
一、缩放biefore/after伪元素
伪元素进行绝对定位,background着色要优于border着色,适合画单线条:
.fineLine {
position: relative;
}
.fineLine:before,.fineLine:after{
position: absolute;
content: " ";
height: 1px;
width: 100%;
left: 0;
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}
.fineLine:before {
top: 0;
background: #000;
}
.fineLine:after {
bottom: 0;
border-bottom: 1px solid #000;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
.fineLine:after,.fineLine:before {
-webkit-transform: scaleY(.667);
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.fineLine:after,.fineLine:before {
-webkit-transform: scaleY(.5);
}
}
二、box-shadow模拟
box-shaodw适合模拟box四周都需要细线border的情况,而且支持border-radius。此例中演示的是dppx鉴别:
.fineLine {
box-shadow: 0 0 0 1px;
}
@media (min-resolution: 2dppx) {
.fineLine {
box-shadow: 0 0 0 0.5px;
}
}
@media (min-resolution: 3dppx) {
.fineLine {
box-shadow: 0 0 0 0.33333333px;
}
}
css3写出0.5px的边框
一说到0.5px的边框,我们一般认为是不行的,因为在ps中0.5px的线也是做不出来的,这个计算机的像素有关系. 废话不多说了,0.5px 其实用的是css3新特性,box-shadow:阴影设置 代 ...
css给div添加0.5px的边框
具体代码实现如下:
CSS3实现0.5px的边框
前端页面细节处理好了才会显得精致.边框在网页中是常见的一种样式了.虽然不把它处理为0.5px看上去没毛病,但是想让你做的东西征服更多的人,这些细节处理是必须的. 今天主要说一下如何让边框显示0.5px ...
css 0.5px
1. 利用css3新属性scale(好用推荐) 其实现的关键就是利用before或after伪元素,宽高同时设为200%,然后再缩放0.5,自然就是0.5px了 代码如下: div { positon ...
CSS 3中细线边框如何实现?
在app应用开发中,我们常常都需要用到css3来设置应用的样式.由于app都是在移动设备上进行展示,所以边框描边的线一般都小于1px,而以往我们使用的都是1px及以上的.那么问题来了,对于小于1px的 ...
0.5px的边框
html怎么添加5px高的线,CSS 0.5px 细线边框的原理和实现方式相关推荐
- html怎么添加5px高的线,css给div添加0.5px的边框
具体代码实现如下: border div{ position: relative; width: 100%; background-color: #fff; } div:before{ content ...
- 0.5px的线如何实现
问题 . hr.half-px {height: 0.5px; } 不同设备,不同浏览器差异较大 解决 .hr.scale-half {height: 1px; transform: scaleY(0 ...
- [css] 不使用border画出1px高的线,在不同浏览器的标准和怪异模式下都能保持效果一样
[css] 不使用border画出1px高的线,在不同浏览器的标准和怪异模式下都能保持效果一样 <div style="width: 100%;height: 1px;"&g ...
- CSS实现0.5px的线 0.5rpxborder边框
1.0.5px的线 核心代码就是通过transfrom的scaleY属性,溢出隐藏掉就可以了 // html <div class="line"></div> ...
- [前端CSS高频面试题]如何画0.5px的边框线(详解)
往期css3文章 详解 CSS3中最好用的布局方式--flex弹性布局(看完就会) CSS3基础属性大全 CSS3动画属性 animation详解(看完就会) CSS3 transform 2D转换之 ...
- 画出0.5px的线,css
1,box-shadow box-shadow允许小数点,该属性可设置的值包括阴影的X轴偏移量.Y轴偏移量.模糊半径.扩散半径和颜色,所以我们可以设置他的扩散半径来实现0.5px的线 2, tran ...
- html5给div设置单边界,纯CSS实现border的0.5px设置
移动开发现在占据着越来越大的前端开发比例,所以对于移动端WEB页的要求也越来的越多,比如很多的H5页面,在设计出来时,看起来更像是一个原生的APP页面,而我这里想说的一个点就是,在H5页面中,关于分隔 ...
- 前端页面设计0.5px的线
首先,我们先来了解几个概念. 物理像素(physical pixel) 一个物理像素是显示器(手机屏幕)上最小的物理显示单元(像素颗粒),在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值. ...
- android textView 替文字添加下划线 删除线
android textView 替文字添加下划线 删除线 方法1: tv=(TextView)findViewById(R.id.tv); tv.getPaint().setFlags(Paint. ...
最新文章
- 分类问题中的“维数灾难” - robotMax
- AI时代,为何机器人公司无法盈利只能走向倒闭?
- JSONP的实现原理
- struts2获取服务器临时目录
- WINCE6.0 chain.bin和xipkernel.bin解析
- 数学建模论文参考大礼包
- 干支纪年法简便算法_民间玄学:那些年我理解的何谓“天干”,“地支”,“干支”...
- 前端学习(566):margin auto机制
- centos 断电重启后,文件系统损坏修复
- 高并发场景下的缓存 + 数据库双写不一致问题分析与解决方案设计
- Python案例:获取天气信息并绘制气温折线图
- FPGA设计注意事项
- STC单片机 命名规则,最小系统 图示
- 记element + xlsx 导出表格数据重复的坑
- python万年历代码带解释_Python 万年历代码简单示例
- 使用量产工具修复U盘教程
- 金庸年度最新十大广告
- app模式会被第三方平台模式取代吗_第三方APP逐渐被替代?网友:手机自带的足够用了...
- Java控制器controller_实现接口Controller定义控制器
- 数据中心网络设备管理(二)