【CSS】画出宽度为1像素的线或边框
由于多倍的设计图在移动设备上显示时会将设计图进行缩小到视口宽度,而1px的边框没有随着页面进行缩小而导致效果太粗,想要还原设计图1px的显示效果,因此需要一些方法来实现边框宽度小于1px。
实现方法很多,下面是个人认为比较好的几种
1. 使用伪元素添加边框
通过给为元素设置边框后进行比例缩放。这种方法需要占用一个伪元素,而且代码也比较多。
需要注意的是要设置box-sizing:border-box
来解决元素和伪元素之间有缝隙的问题
div{
position: relative;
width: 2rem;
height: 1rem;
background-color: #bfa;
}
div::before {
position: absolute;
top: 0;
left: 0;
content: " ";
/*单边框效果*/
width: 100%;
display: block;
background-color: #f00;
height: 1px;
transform: scale(1, 0.5);
/*四条边框效果*/
width: 200%;
height: 200%;
box-sizing: border-box; /*记得添加*/
border: 1px solid #f00;
border-radius:5px;
transform-origin: left top;
transform: scale(0.5);
}
2. 使用box-shadow添加边框
这种方法通过设置阴影的扩展半径来实现添加边框,代码量非常少。
可以通过添加给box-shadow设置inset值是边框向内扩展
div {
position: relative;
width: 2rem;
height: 1rem;
background-color: #bfa;
//添加边框
box-shadow: 0 0 0 0.3333px red inset;
}
3. 修改viewport缩放值
根据DPR设置viewport的scale将页面进行缩放,边框宽度直接写1px即可,但是后期如果遇到echarts之类的就会影响样式
DPR=2时,初始缩放0.5; DPR=3时,初始缩放0.333
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
【CSS】画出宽度为1像素的线或边框的更多相关文章
- 用HTML+CSS画出一个同心圆
参加web前端校招的同学们经常会遇到这样的面试题:用HTML+CSS画出一个同心圆. 例如: 这道题主要考验的是基础盒模型布局能力和倒圆角属性的巧用. 1.html代码 <body> &l ...
- 用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 如何用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 用css画出三角形【转】
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- css 画出三角形
技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...
- 情人节,教大家使用css画出一朵玫瑰花。
情人节到了,给大家来一朵高端的玫瑰花. 在网上看到的一个canvas实现的玫瑰花,效果很好,但是代码被压缩过,也没有注释,看的云里雾里的. 今天我教大脚用CSS来实现一朵玫瑰花. 先看效果 首先我们画 ...
- CSS画出的各种形状图
利用CSS可以画出各种需要的图形目录[1]矩形[2]圆形[3]椭圆[4]直角三角形[5]正三角形[6]平行四边形[7]梯形[8]六角星[9]六边形[10]五角星简单图形 矩形div{ width: 1 ...
- CSS画出三角形(利用Border)
画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. div{ width ...
- 用css画出对话框
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAa4AAAFSCAYAAACqpTv4AAAgAElEQVR4nO3deZBU5b3GcUIlVTG3bi
- CSS画出的图
// × 目录 [1]矩形 [2]圆形 [3]椭圆[4]直角三角形[5]正三角形[6]平行四边形[7]梯形[8]六角星[9]六边形[10]五角星 简单图形 矩形 div{ width: 100px; ...
随机推荐
- Java学习笔记-BigDecimal类型
1.介绍 Java在java.math包中提供的API类BigDecimal,用来对超过16位有效位的数进行精确的运算.双精度浮点型变量double可以处理16位有效数.在实际应用中,需要对更大或者更 ...
- mysql5.7_win64位安装
1.下载MySQL压缩包解压缩 2.更改my.ini配置文件 [mysqld] #设置3306端口号 port=3306 #设置MySQL的安装目录 basedir=F:\\JavaSoftware\ ...
- 2021SWPUCTF-WEB(二)
ez_unserialize 不知道在哪,御剑扫叭 有一个robots.txt 一道反序列化好像是 分析代码应该是admin=admin.passwd=ctf即可输出flag < ...
- UniDBGrid控件的几个功能优化
内容自动换行 默认UniDBGrid的cell内的内容如果超出表格列宽并不自动换行和调整行高,给客户带来极大的不方便,通过修改ServerModule的属性CustomCSS可以实现. <sty ...
- markdown常用语法及Typora的使用
一.markdown markdown简介 markdown是一种文档格式,后缀名为.md.markdown非常适于写博客,基本所有博客网站都支持markdown语法格式. 1.标题 mark ...
- Django+bootstrap+layui集成
一.django项目搭建:1.Python安装2.下载Django解压到Python安装目录G:\python3.7.4\3.cmd G:\python3.7.4\Django-4.0.5 执行 py ...
- Solon2 接口开发: 强化 Gateway 模式
一般可以从这几方面对 Gateway 模式进行强化: 定制异常状态码 定制基类 将一些处理独立封装成类 接口只返回数据部份,异常状态用抛 强化之后,具体的网关即简单,又功能强大.同时会对团队开发形成一 ...
- Promise的使用及原理
此文章主要讲解核心思想和基本用法,想要了解更多细节全面的使用方式,请阅读官方API 这篇文章假定你具备最基本的异步编程知识,例如知道什么是回调,知道什么是链式调用,同时具备最基本的单词量,例如page ...
- Unity JobSystem使用及技巧
什么是JobSystem 并行编程 在游戏开发过程中我们经常会遇到要处理大量数据计算的需求,因此为了充分发挥硬件的多核性能,我们会需要用到并行编程,多线程编程也是并行编程的一种. 线程是在进程内的,是 ...
- JS逆向实战12——某店 captchaToken 参数 加密
今天爬取的是网站需要模拟登陆 目标网站 aHR0cHM6Ly9wYXNzcG9ydC55aGQuY29tL3Bhc3Nwb3J0L2xvZ2luX2lucHV0LmRv 浏览器抓包分析 随便输入一堆假 ...