移动端比1px还小的border
巧用border
在移动端 经常出现border,细边框
但有的时候 产品大大1px甚至乎会觉得不够细
那么要如何写出比1px还要小的border
下面是代码 希望对大家有所帮助
.thinner-border {
position: relative;
width: 1px;
margin:14px 0;
height: 20px;
}
.thinner-border:after {
content: '';
position: absolute;
width: 500%;
height: 500%;
border: 1px solid #ffd000;
transform-origin: 0 0;
transform: scale(0.2, 0.2);
box-sizing: border-box;
}
移动端比1px还小的border的更多相关文章
- 微信移动端web页面调试小技巧
技术贴还是分享出来更加好,希望能对一些朋友有帮助,个人博客 http://lizhug.com/mymajor/微信移动端web页面调试小技巧
- 源码推荐:移动端商城(微信小程序源代码) WebView离线缓存
移动端商城(微信小程序源代码)(上传者:腾讯攻城师jack) 功能包括:商品橱窗,商品搜索,购物车,结账等功能. TableView嵌套webView自适应高度(上传者:linlinchen) tab ...
- img 标签注意 默认img标签,有一个1px的边框 img{ border: 0; }
默认img标签,有一个1px的边框 img{ border: 0; }
- 移动端 CSS 1px 问题及解决方案
移动端 CSS 1px 问题及解决方案 viewport & transfrom: scale viewport 的 initial-scale 设为 1 UI 设计稿用rem 和 trans ...
- HTML中表格table边框border(1px还嫌粗)的解决方案:
摘自:http://blog.sina.com.cn/s/blog_ae809a730102vrx8.html 第一种方法: 1.将table的属性设置为:BORDER=0 .cellspacing= ...
- border-1px的实现(stylus)如何在移动端设置1px的border
在这里我只介绍下边框的实现: 当样式像素一定时,因手机有320px,640px等.各自的缩放比差异,所以设备显示像素就会有1Npx,2Npx.为保设计稿还原度,解决就是用media + scale. ...
- 移动端的1px边框问题
最近在做一个移动端项目,涉及到1像素问题 其实质就是移动端的css里写1px,看起来比1px粗,这就是物理像素和逻辑像素的区别.物理像素和逻辑像素之间存在一个比例关系,在Javascript中可以用w ...
- 在移动端实现1px的边框
由于分辨率 DPI 的差异,高清手机屏上的 1px 实际上是由 2×2 个像素点来渲染,有的屏幕甚至用到了 3×3 个像素点 所以 border: 1px 在移动端会渲染为 2px 的边框 与设计图产 ...
- 移动端实1px细线方法
前言 在移动端中,宽度100%,1px的线看起来要比pc端中宽度100%,1px的线粗, 那是因为css中的1px并不等于移动设备(物理像素)的1px.物理像素显示是1个像素代表2个像素,所以出现为2 ...
随机推荐
- JZ-032-把数组排成最小的数
把数组排成最小的数 题目描述 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为3213 ...
- LeetCode-028-实现 strStr()
实现 strStr() 题目描述:实现 strStr() 函数. 给你两个字符串 haystack 和 needle ,请你在 haystack 字符串中找出 needle 字符串出现的第一个位置(下 ...
- LeetCode-102-二叉树的层序遍历
二叉树的层序遍历 题目描述:给你一个二叉树,请你返回其按 层序遍历 得到的节点值. (即逐层地,从左到右访问所有节点). 示例说明请见LeetCode官网. 来源:力扣(LeetCode) 链接:ht ...
- selenium+python自动化之iframe
我们以163邮箱登录界面为例,简单讲解下如何定位iframe中元素 一开始直接定位界面上元素,我们会发现无法定位到,为什么呢,我们可以通过查看页面元素发现页面中嵌入的有iframe,需要先定位到ifr ...
- 矩池云上安装及使用Milvus教程
选择cuda10.1的镜像 更新源及拷贝文件到本地 apt-get update cp -r /public/database/milvus/ / cd /milvus/ cp ./lib/* /us ...
- Sublime Text 3 build 3103 注册码
分享几个ST3的注册码,第一个我注册到自己电脑上,亲测可用,剩余几个没有测试.→原文链接 -– BEGIN LICENSE -–Michael BarnesSingle User LicenseEA7 ...
- laravel7 H-ui模板ajax软删除
1:HTML 书写 {{-- 不能自己删除自己的按钮出现 $item循环的值,$auth检测函数 --}} @if(auth()->id()!=$item->id) <a title ...
- xshell + xftp 安装及1603错误解决
xshell + xftpan下载安装 百度网盘下载链接:https://pan.baidu.com/s/14orvEWDjFkrLvr_9JaG4Gw 提取码:om9z 下载地址 https://w ...
- 程序语言与编程实践2-> 蓝桥杯C/C++备赛记录1 | 入门了解与首周训练
寒假前班主任帮我们报了名,是得好好准备准备.作为一个CSer,coding能力一定不能太弱.我反思,好久没写C/C++代码了,净是些随手写的python脚本,刚开始上手题目bug一大堆. 由于也不是啥 ...
- 道路中心线提取、河道中心线的提取(ArcScan)
道路中心线的提取,相信大家并不陌生. 道路中心线是道路路线几何设计中的重要特征线,也是道路交通管理中的重要控制线. 街区内的道路应考虑消防车道的通行,道路中心线间的距离不宜大于160米. 今儿个,博主 ...