移动端比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 ...
随机推荐
- Objective-C 基础教程第六章,源文件组织
目录 Object-C 基础教程第六章,源文件组织 0x00:前言 0x01:Xcode创建OC类 0x02:Xcode群组 0x03 Xcode跨文件依赖关系 @class关键字 导入和继承 小结 ...
- vue--加载模块详解
1.postcss-loader.autoprefixer.css-loader .sass-loader:加载css模块及css预处理模块,添加浏览器前缀到CSS内容里 加载模块:npm insta ...
- LeetCode-046-全排列
全排列 题目描述:给定一个不含重复数字的数组 nums ,返回其 所有可能的全排列 .你可以 按任意顺序 返回答案. 示例说明请见LeetCode官网. 来源:力扣(LeetCode) 链接:http ...
- Python 学习路线(2022)
原文链接: Python 学习路线(2022) 前几天整理了一份 Go 学习路线(2022),广受好评.那么趁火打劫,不是,是趁热打铁,又整理了一份 Python 学习路线. 内容依然是从入门到进阶, ...
- LOTO示波器汽修专用款选型指南
LOTO示波器汽修专用款选型指南 LOTO各种型号的示波器其实都可以用作汽车传感器信号波形的检测.汽修应用中,工程师对示波器的性能要求对于LOTO产品来说不算高. 在我们销售和技术支持的积累过程中,我 ...
- python+selenium+pycharm使用
上一章节讲了安装python及selenium,该章节讲解下使用pycharm编辑器进行代码编写 下载地址:http://www.jetbrains.com/pycharm/download/#sec ...
- Angular + asp.net core 入门
一.简介 通俗的理解,Angular 只是一个前端框架,它只负责前端的事,但一个完整的项目还应该有后端,这其中之一可选的技术就是 asp.net core .这里简单学习一下两个框架之间的协同开发. ...
- MySQL-DB-封装-简易版
<?php class DB{ private $link; public function __construct($host,$user,$password,$dbname,$port) { ...
- 机器学习之BP神经网络
import random import math #神经元的定义 class Neuron: def __init__(self,bias): self.bias = bias self.weigh ...
- 创造性解决arch/manjaro官方aur源下载慢办法
今天想用yay下载steam++加速github网页时发现yay下载一段时间后速度变为零,想到应该是aur源的问题,但是aur修改成国内源后发现没有用,于是想到可以手动修改PKGBUILD文件的sou ...