css圆角不圆和1px方案

1.圆角不圆

比如需要我们画一个 r 为 5px 的圆,如果我们使用 rem 作为单位,我们很快会发现在一些机型上的图案不圆,会呈现椭圆形。这是由于 rem 转 px 会存在精度丢失问题。

所以这个时候我们就需要使用 px 配合 dpr 来实现:

.circle(@size,@backgroundColor){
  width:@size;
  height:@size;
  background-color:@backgroundColor;
  [data-dpr=‘1‘]&{
    width:@size*0.5;
    height:@size*0.5;
  }
  [data-dpr=‘3‘]&{
    width:@size*1.5;
    height:@size*1.5;
  }
}

2.1px 细线问题

1.使用伪类 + transform

.border_bottom{
  overflow:hidden;
  position:relative;
  border:none!inportant;
}
.border_bottom:after{
  content:‘‘;
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background-color:#d4d6d7;
  -webkit-transfrom-origin:0 0;
  transfrom-origin:0 0;
  -webkit-transform:scaleY(0.5);
  transform:scaleY(0.5);
}
使用box-shadow模拟
.border_bottom{
  box-shadow:inset 0px -1px 1px -1px #d4d6d7;
}

3. 从 html 元素继承 box-sizing

在大多数情况下我们在设置元素的 borderpadding 并不希望改变元素的 width,height值,这个时候我们就可以为该元素设置 box-sizing:border-box;

我不希望每次都重写一遍,而是希望他是继承而来的,那么我们可以使用如下代码:

html{
  box-sizing:border-box;
}
*,*:before,*:after{
  box-sizing:inherit;
}

这样的好处在于他不会覆盖其他组件的 box-sizing 值,又无需为每一个元素重复设置 box-sizing:border-box;

4. 内联首屏关键 CSS

性能优化中有一个重要的指标 —— 首次有效绘制(FMP),即指页面的首要内容(primary content)出现在屏幕上的时间。这一指标影响用户看到页面前所需等待的时间,而 内联首屏关键 CSS(即 Critical CSS,可以称之为首屏关键 CSS) 能给用户一个更好的心理预期。

我们知道内联 CSS 能够使浏览器开始页面渲染的时间提前,即在 HTML 下载完成之后就能渲染了。

既然是内联关键 CSS,也就说明我们只会将少部分的 CSS 代码直接写入 HTML 中。至于内联哪些 CSS 你可以使用 Critical。

5.超出省略

.line-camp{
  text-overflow:-o-ellipsis-lastline;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:@clamp;
  -webkit-box-orient:vertical;//这句在webpack打包时会省略
}
解决方案
.line-camp{
  text-overflow:-o-ellipsis-lastline;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:@clamp;
  /*!autoprefixer:off*/
  -webkit-box-orient:vertical;//这句在webpack打包时会省略
  /*!autoprefixer:on*/
}

6.两端对齐

html
  <div>姓名</div>
  <div>手机号码</div>
  <div>密码</div>
css
div{
  margin:10px 0;
  width:100px;
  text-align-last:justify;
}

本文摘自公众号 作者:小生方勤「前端词典」系列文章作者,致力于输出对读者有帮助的文章

原文地址:https://www.cnblogs.com/xuniannian/p/10935112.html

时间: 2024-11-06 09:24:21

css圆角不圆和1px方案的相关文章

纯css圆角边框

第一章.基本的圆角框 原创:冰极峰 转载请注明出处 2009年11月30日10:19:34 文章导航: 第一章:基本的圆角框 第二章:透明圆角化背景图片 第三章:圆角化图片 第四章:CSS圆角框组件 V1.0 序言:在我的文章<超圆滑圆角框的半完美解决方案>中已经总结了七种不同的圆角框解决方案,基本上总结完了目前网络上比较流行的圆角框实现方案.而在我的另一篇文章<无图片山顶角>中又是一个另类的实现方法. 纯CSS实 现圆角框是一件大家都说烂了的事件,我也写过两篇总结文章,为什么还会

收获2.css圆角总结

css圆角想必大家再熟悉不过了,下面分享一些我知道的,你有可能不知道的知识~~~~ 使用圆角有以下几种方法 1.切图 将四个圆角切图,将父元素设置relative,将四个角通过absolute定位到固定位置,在父元素不设置高宽时,是可以自适应的,这种方法想必大多数人都知道 就不再废话了. 如果需要兼容ie,那么此方法是最好的选择了. 2.像素画 使用html+css2.0绘制圆角弧度 HTML代码 <div class="wrap"> <div class="

CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)

CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力) 来源:互联网 作者:佚名 时间:03-28 14:17:14 [大 中 小] border-radius:用这个属性能实现圆角边框的效果.现在只有Mozilla/Firefox 和 Safari 3支持该属性. -webkit-border-radius:苹果:谷歌,等一些浏览器认,因为他们都用的是webkit内核: -moz-border-radius:moz这个属性 主要是专门支持M

css 圆角

一.支持的浏览器 浏览器 支持性 Firefox(2.3+) √ Google Chrome(1.0.154+…) √ Google Chrome(2.0.156+…) √ Safari(3.2.1+ windows) √ Internet Explorer(IE7, IE8) × Opera 9.6 × 二.用途及其优势 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量.图片文件的生成.更新

css圆角特效

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css圆角特效</title> <style> div{ text-align: center; font-size: 32px; width: 100px; color: white; padding: 10px; margin: 10px; -webkit-border-radiu

HTML5 纯css圆角代码

<html> <head> <title>河北礼品公司</title> </head> <style> #test { border:1px solid #ccc; background:#fff; padding:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } </style> <body>

兼容性很好的纯css圆角

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>纯css圆角</title> <style type="text/css"> #xsnazzy h1,#xsnazzy h2,#xsnazzy p{margin:0 10px;letter-spacing:1px;} #

css圆角矩形属性

-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; css圆角矩形属性,布布扣,bubuko.com

谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案

开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法 谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型 谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少 谈谈一些有趣