移动端比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 ...
随机推荐
- Leaflet:控件Control相关
Leaflet官方文档中只给出了4种控件:Zoom.Attribution.Layers.Scale:它们都是继承自Control类,具体可以参考Control. Control Zoom.Scale ...
- (第二章第二部分)TensorFlow框架之读取图片数据
系列博客链接: (第二章第一部分)TensorFlow框架之文件读取流程:https://www.cnblogs.com/kongweisi/p/11050302.html 本文概述: 目标 说明图片 ...
- JZ-022-从上往下打印二叉树
从上往下打印二叉树 题目描述 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 题目链接: 从上往下打印二叉树 代码 import java.util.ArrayList; import jav ...
- 矩池云 | Tony老师解读Kaggle Twitter情感分析案例
今天Tony老师给大家带来的案例是Kaggle上的Twitter的情感分析竞赛.在这个案例中,将使用预训练的模型BERT来完成对整个竞赛的数据分析. 导入需要的库 import numpy as np ...
- 关于stationary 和non-stationary signals 的区别和定义
结论:实际上在生活中是没有静态信号(stationary signals)的.而我们之所以把随机信号分为stationary and non-stationary 完全是根据信号产生的特征(chara ...
- LGP4587题解
遇到一道题,我们该做什么? 打暴力. 此题的暴力是什么?从小到大枚举答案.但这太慢了,需要一个结论来加速一下: 若 \([1,x]\) 都能够被表示出来,新加入一个数 \(y\),若 \(y>x ...
- Docker 容器、镜像、日志相关操作
一. 容器操作 新建并启动 命令:docker run 查看容器 命令:docker ps 查看终止状态的容器 命令:docker ps -a 启动已终止容器 命令:docker start 终止容器 ...
- 分布式 PostgreSQL 集群(Citus),分布式表中的分布列选择最佳实践
确定应用程序类型 在 Citus 集群上运行高效查询要求数据在机器之间正确分布.这因应用程序类型及其查询模式而异. 大致上有两种应用程序在 Citus 上运行良好.数据建模的第一步是确定哪些应用程序类 ...
- Ubuntu 16.04 更改系统语言为简体中文
镜像下载.域名解析.时间同步请点击阿里巴巴开源镜像站 一.安装时报错 原因:以访客的身份进入的会报错,改为管理员进入即可. ps:有时候往往一点小细节也会造成大问题,但是我们要善于排错. 注:可以看到 ...
- 6月26日 Django 中间件
前戏 我们在前面的课程中已经学会了给视图函数加装饰器来判断是用户是否登录,把没有登录的用户请求跳转到登录页面.我们通过给几个特定视图函数加装饰器实现了这个需求.但是以后添加的视图函数可能也需要加上装 ...