常用的css3新特性总结

Posted 2020-10-05

1:CSS3阴影 box-shadow的使用和技巧总结：

基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}

对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}

box-shadow属性的参数设置取值：

阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；

X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；

Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；

阴影模糊半径：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数。

 

2：实现多行文本超出显示…(火狐浏览器不支持)

display:-webkit-box
-webkit-line-camp:3;
-webkit-box-orient:vertical;

 

3：取消默认的高亮显示

 -webkit-tap-highlight-color:rgba(0,0,0,0);

 

4:消除手机端默认样式

-webkit-apperance:none;

 

5:css不显示滚动条

::-webkit-scrollbar{
      width:0;
    }

 

6：before和after元素不设置content时会不显示。

 

7：设置或检索是否允许用户选中文本 

user-select:none|text|all|element 
文本不能被选择 
none：

可以选择文本  

text： 

 

8：实现图片自适应的方式 
- 使用picture元素（H5新增） 
- 使用img的srcset，sizes属性

<picture>
      <source  srcset="a.png" media="(max-width:750px)"/>
      <source srcset="b.png"/>
      <img srcset="b.png"/>
 </picture>

这个元素是有兼容性的，需要添加额外的插件

<script src="picturefill.js"></script>

<img src="a.png" srcset="a.png,b.png" sizes="(max-width:500px) 128px,256px"/>

上面这段代码的意思表示：不支持srcset属性时，使用src中的图片，否则浏览器会自动匹配最佳显示图片；sizes属性的值表示当可视区宽度不大于500像素，则图片宽度显示为128px，其他情况下，图片宽度显示为512px。

 

10: 文本最多显示3行，超出显示...

p{   
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
 }

 

11：元素开启GPU硬件加速 
当页面中有动画效果时开启GPU硬件加速让浏览器在渲染动画时从CPU转向GPU，从而页面渲染速度，减少页面卡顿现象。 
开启硬件加速的方法

-webkit-transform: translate3d(0, 0, 0); 
或者 transform:translateZ(0); 

另外开启硬件加速后可能会导致页面频繁闪烁或者抖动可以尝试用一下方法解决 

-webkit-backface-visibility:hidden； 
-webkit-perspective:1000;

 

12:-webkit-font-smoothing:设置字体的抗锯齿或者顺滑度。 
它有三个值：  
none —— 对小像素的文本比较好  
subpixel-antialiased ——默认值  
antialiased ——抗锯齿很好

 

13: pointer-events 
让a元素不可点击，后来才发现使用这个属性就可以做到

a[href="http://example.com"] {
    pointer-events: none;
}
<li><a href="http://example.com">一个不能点击的链接</a></li>

 

14: css3下三角的实现

<div class="down-triangle"></div>
.down-triangle{
  width: 0;
  height: 0;
  border-color: green;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid red;
}

 

15：css各个选择器优先级原则

!importan > 行内样式（style属性）> 内部样式（style标签）> 外部样式文件 
id > class（伪类选择器，属性选择器） > 元素选择器 > * 

 

计算方式：

选择器的权重 
id（100） 
class = 属性选择器 = 伪类选择器（10） 
元素选择器（1） 
各个选择器的权重值相加，值越大，优先级越高。（值相等的时候，后定义的覆盖先定义的。）