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的问题, ...
随机推荐
- ES6语法知识
let/const(常用) let,const用于声明变量,用来替代老语法的var关键字,与var不同的是,let/const会创建一个块级作用域(通俗讲就是一个花括号内是一个新的作用域) 这里外部的 ...
- python 保存对象文件
之前用 R 语言一直感觉 .Rdata 格式的文件很好用,可以把每次执行的中间文件保存便于下次调用,刚熟悉 Python 还没接触这块知识,所以有时候做项目不太顺手,索性上网搜了下,整理如下: 模型存 ...
- <a>标签里的函数事件写法的实战建议
如果在实际应用中确实是要用到标签来响应onclick事件的, 那么就建议使用下面三种方法 <a href="javascript:void(0);" onclick=&quo ...
- Java面试题 OOAD & UML+XML+SQL+JDBC & Hibernate
二.OOA/D 与UML 部分:(共6 题:基础2 道,中等难度4 道) 96.UML 是什么?常用的几种图?[基础] 答:UML 是标准建模语言:常用图包括:用例图,静态图(包括类图.对象图和包图) ...
- mvc ajax访问后台时session过期无法跳转到Login页面问题解决
public class BaseController : Controller { protected User UserInfo { set { Session["UserInfo&qu ...
- Android 动态注册JNI函数
1.JNI函数注册方式 在Android开发中,由于种种原因我们需要调用C/C++代码,在这个时候我们就需要使用jni了, jni在使用时要对定义的函数进行注册,这样java才能通过native关键字 ...
- mysql中的锁
MYSQL不同的存储引擎支持不同的锁的机制 MyISAM 支持表锁,InnoDB支持表锁和行锁 表锁,行锁比较 表锁:开销小,加锁快:不会出现死锁:锁定力度大,发生锁冲突概率高,并发度最低 行锁:开销 ...
- Error when loading the SDK 发现了以元素 'd:skin' 开头的无效内容。此处不应含有子元素
Error when loading the SDK: Error: Error parsing D:\DIRS\Java\android-sdk-windows\system-images\andr ...
- centos7安装redmine3.4
前言:安装要求 Ruby解释器 给定Redmine版本所需的Ruby版本是: Redmine版本 支持的Ruby版本 使用Rails版本 4.0 ruby 2.2(2.2.2及更高版本),2.3,2. ...
- JavaWeb——tomcat manager 403 Access Denied .You are not authorized to view this page.
403 Access Denied You are not authorized to view this page. If you have already configured the Manag ...