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的问题, ...
随机推荐
- zombodb 低级api 操作
zombodb 低级api 允许直接从zombodb 索引中进行insert.delete 文档,同时保留了mvcc 的特性,但是数据没有存储在 pg 中,但是也带来数据上的风险,我们需要注意进行es ...
- Ajax(Asynchronous JavaScript )and xml
JavaScript的两种任务执行模式--同步(synchronous)和异步(Asynchronous) 同步模式 JavaScript的执行环境是单线程的,意味着一次只能执行一个任务,如果有多个任 ...
- No input file specified.
no input file specified 解决方法 2018年02月23日 14:25:07 tiramisuer8023 阅读数:36607 版权声明:本文为博主原创文章,未经博主允许不得 ...
- servlet-jsp-EL 表达式
jsp--EL表达式 jsp表达式<%= %>用于向页面中输出一个对象.jsp2.0时在页面中不允许出现jsp表达式和脚本片段,于是使用EL表达式来代替jsp表达式,标签代替脚本片段 基本 ...
- ado.net调用带参数的存储过程
- 第二篇*1、Python基本数据类型
数据类型: 变量可以处理不同类型的值,基本的类型是数和字符串.使用变量时只需要给它们赋一个值.不需要声明或定义数据类型.Python3 中有六个标准的数据类型:Number(数字),String(字符 ...
- IDEA(MAC) 快捷键
从eclipse到IDEA:从Windows到MAC 有些不习惯,记录一些日常使用的快捷键 1.格式化代码 command+alt+L 2.导包 alt+ enter 3.自动生成该类型的对象 com ...
- SpringMVC Get请求传集合,前端"异步"下载excel 附SpringMVC 后台接受集合
最近项目上管理后台需要自己做一部分js部分,之前都是前端来弄...碰到了下载excel,刚开始使用ajax,搞了好久发现不合适..下载不了,网上说ajax返回类型不支持二进制流.. 因此采用 wind ...
- Web页面长时间无操作后再获取焦点时转到登录界面
今天开始讲新浪博客搬到博客园. 在工作中遇到的小问题,感觉有点意思,就记录下来吧! 该问题分为两种情况,一.Web页面长时间无操作后,在对其进行操作,比如点击“首页”.“设 ...
- POJ2456Aggressive cows-(二分判定)
Description Farmer John has built a new long barn, with N (2 <= N <= 100,000) stalls. The stal ...