CSS如何作小于1PX的边
小于1PX的边能使页面变得更加精致,那么具体怎么做呢?
主要思路就是设置伪元素先放大再通过变换缩小。
代码如下
.border {
position: relative;
//如果有圆角
}
.border:before {
left: 0;
border-radius: 20px;//如果有圆角
content: '';
position: absolute;
width: 200%;
height: 200%;
border: 1px solid #9A9A9A;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-o-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
CSS如何作小于1PX的边的更多相关文章
- css笔记--web端小于1px设计的处理方法
HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...
- CSS3实现小于1px的边框(移动端)
<!doctype html> <html lang="en"> <head> <meta content="width=dev ...
- css样式表格边框1px hover时为2px 实现方式
//css .flclass-cont .flclass-cont-box{width:%;display:inline-block;font-size:;margin:10px;position:r ...
- CSS製作動畫效果(Transition、Animation、Transform)
CSS 2D Transforms https://www.w3schools.com/css/css3_2dtransforms.asp CSS 3D Transforms https://www. ...
- css中em小于1时chrome字体大小和firefox字体大小不一致的问题
css中em设置为0.8,结果页面显示,chrome字体比firefox字体大了不少. chrome有默认字体大小,默认为12px.设置的字体大小小于12px时,也是按照12px来显示. firefo ...
- border.css(解决移动端1px问题)
由于某些机型分辨率过高,会导致1px变成2-多px像素的问题,引用bordercss解决 @charset "utf-8"; .border, .border-top, .bord ...
- css移动端适配 1px边框的解决方案
.border{ width: 100px; height: 100px; position: relative; } //加上媒体查询更严谨一些 dpr为2的设配才进行缩放,dpr为1的设备边框就是 ...
- css设置字体小于12px
p { white-space: nowrap; font-size: .12rem; -webkit-transform-origin-x: 0; //缩小后文字居左 -webkit-transfo ...
- 解决CSS小于12px的文字在谷歌浏览器显示问题
做前端设计的人经常要接触CSS方面的问题,估计有不少人会遇到Chrome谷歌浏览器中CSS设置字体小于12px显示不正常,强创网络在做magento模板过程中就遇到了,起初以为是自己写的CSS的问题, ...
随机推荐
- win32网络模型之重叠I/O
网上大部分重叠I/O的基本概念都讲得很清楚,但是大多讲得不是很深入,实际用起来很多问题.这里只对完成实例的通知进行讨论,对问题进行总结. 重叠IO异步读写后,在某一时刻"完成"后会 ...
- String引用数据类型
一.String类的第一种方式 (原文地址:https://blog.csdn.net/wangdajiao/article/details/52087302)1.直接赋值 例:String str ...
- xgboost实例代码
# -*- coding: utf-8 -*- import xgboost as xgb import csv import jieba jieba.load_userdict('wordDict. ...
- 第三章 C#程序结构[3.2 选择结构的应用(Windows窗体应用程序)(四)]
[案例]设计一个顾客选购商品的系统.其中,顾客身份有两类,一类是VIP,另一类是普通会员:商品种类有3种.分别是上衣.裤子和鞋子.其中,VIP享受8折优惠和商店赠送的礼品,而普通会员都不享受.单击[确 ...
- ubuntu12.04 64bit libncurses5-dev和libncurses5-dev:i386共存性问题讨论
ubuntu12.04 64bit 编译kernel(或者make menuconfig)源码时出现如下错误: HOSTLD scripts/kconfig/mconf scripts/kconfig ...
- PAT 乙级1093 字符串A+B (20 分)
1093 字符串A+B (20 分) 给定两个字符串 A 和 B,本题要求你输出 A+B,即两个字符串的并集.要求先输出 A,再输出 B,但重复的字符必须被剔除. 输入格式: 输入在两行中分别给出 A ...
- Linux vim快捷键
1 替换 r 替换 先按r再按要替换的内容 2 按yy复制当前行 按p是粘贴 3 # add at 18-10-25 #-------------------------------- ...
- Scrapy实战篇(二)之爬取链家网成交房源数据(下)
在上一小节中,我们已经提取到了房源的具体信息,这一节中,我们主要是对提取到的数据进行后续的处理,以及进行相关的设置. 数据处理 我们这里以把数据存储到mongo数据库为例.编写pipelines.py ...
- [UE4]VR成像原理
一.双眼成像原理 二.3D电影成像原理 模拟人眼.用2个摄像机拍摄,模拟人的左眼和右眼 播放的时候2个投影仪分别同时播放左右摄像机拍摄到内容,观众带上3D眼镜,左眼只能看到左摄像机的内容(过滤右摄像机 ...
- 0003 - 基于xml的Spring Bean 的创建过程
一.目录 前言 创建 Bean 容器 加载 Bean 定义 创建 Bean Spring Bean 创建过程中的设计模式 总结 二.前言 2.1 Spring 使用配置 ApplicationCont ...