常用的css3新特性总结（工作中不断更新中）

Dear 丶 2022-07-14 00:07 167阅读 0赞

1:CSS3阴影 box-shadow的使用和技巧总结  
参考[CSS3阴影 box-shadow的使用和技巧总结][CSS3_ box-shadow]  
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的百分比padding-top和margin-top是相对于父元素的宽度定义。

6:css不显示滚动条

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

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

8：user-select:none|text|all|element  
设置或检索是否允许用户选中文本  
none：  
文本不能被选择  
text：  
可以选择文本  
all：  
当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。  
element：  
可以选择文本，但选择范围受元素边界的约束  
IE6-9不支持该属性，但支持使用标签属性 onselectstart=”return false;” 来达到 user-select:none 的效果；Safari和Chrome也支持该标签属性；  
直到Opera12.5仍然不支持该属性，但和IE6-9一样，也支持使用私有的标签属性 unselectable=”on” 来达到 user-select:none 的效果；unselectable 的 另一个值是 off；除Chrome和Safari外，在其它浏览器中，如果将文本设置为 -ms-user-select:none;，则用户将无法在该文本块中开始选择文本。不过， 如果用户在页面的其他区域开始选择文本，则用户仍然可以继续选择将文本设置为 -ms-user-select:none; 的区域文本；  
对应的脚本特性为userSelect。

9：实现图片自适应的方式  
\- 使用picture元素（H5新增）  
\- 使用img的srcset，sizes属性  
在HTML5中新增了一个元素picture，用过`<video>`,`<audio>`的会觉得`<picture>`的用法很熟悉。

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

上面这段代码的意思表示：不支持srcset属性时，使用src中的图片，否则浏览器会自动匹配最佳显示图片；sizes属性的值表示当可视区宽度不大于500像素，则图片宽度显示为128px，其他情况下，图片宽度显示为512px。  
属性的作用类似媒体查询,但是它只是支持部分媒体查询，比如：

(min-width: 400px)

(not (orientation: landscape) )

( (orientation: landscape) and (min-width:400px) )

( (orientation: portrait) or (max-width: 500px) )

但它不支持我们明确的定义媒体类型：比如screen或者print等等。

除了使用px外，我们还可以使用em、px、cm、vw…，甚至CSS3的calc，不能使用百分比。

sizes=”(max-width: 320px) calc(100vw – 20px), 128px”

表示当视区宽度不大于320像素时候，图片宽度为整个视区宽度减去20像素的大小。

兼容性查看：兼容性

常见的使用场景

（1）如果图片的宽度是整个视口的百分比，那么sizes可以这样设置：

sizes=”80vw”

（2）假如图片两侧的边距各为10px，我们可以这样设置：

sizes=”calc( 100vw - 20px)”

（3）如果有一个两侧边距为10px的图片，允许它的最大宽度为500px，我们可以这样设置：

sizes=”( min-width:520px) 500px, calc(100vw - 20px)”

上面的代码表示当可视区大于520px时，图片宽度为500px，否则宽度为calc(100vw – 20px)计算的值。

10:css渐变色（linear-gradient用法）  
参考文章 [CSS3：linear-gradient，线性渐变的使用方法][CSS3_linear-gradient]

11: 文本最多显示3行，超出显示。。。

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

12:今天自己练习css动画的时候，本来想让一个圆在3秒内实现背景颜色变化从\#f00,\#0f0,到\#00f,后来怎么也没达到自己想要的效果，  
自己写的代码

<div class="change-color"></div>
    .change-color{
        width: 100px;
        height: 100px;
        border-radius:50px;
        background-color: #f00;
        animation: changeColor 5s linear infinite normal;
    }
    
    @keyframes changeColor{
        33% {background: #0f0;}
        66% {background: #00f;}
    }

圆的颜色变化不止出现了3种，而且是闪烁的变化，效果非常不理想，后来查阅了资料，发现用steps来控制时间曲线，问题就解决了。  
改正后的代码

.change-color{ width: 100px; height: 100px; border-radius:50px; background-color: #f00; animation: changeColor 5s steps(1) infinite normal; }
    
    @keyframes changeColor{
        33% { background: #0f0;}
        66% { background: #00f;}
    }

steps的用法：  
steps(n,\[start | end\])  
a. 第一个参数指定了时间函数中的间隔数量（必须是正整数），这个间隔数量作用用于两个关键帧之间，也就是form与30%之间、30%与to之间。

b. 第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。  
具体可以参考[CSS3动画几个平时没注意的属性][CSS3]

13:  
rotate()允许一个参数。  
scale(),translate(),skew()传递一个参数时另外一个参数和当前参数一致；  
transform-origin(),传递一个参数时，其他的参数默认是center；默认是center center；

14:user-select  
取值：  
none：文本不能被选择  
text：可以选择文本  
all：当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。  
element：可以选择文本，但选择范围受元素边界的约束  
浏览器中文本的长按复制功能可以通过该属性来控制。

15：在手机上实现1像素边框的解决方案  
①：利用：before和transform

<span class="node-copy expired-copy">复制</span>
    .exchange-code .expired-copy{
        position: relative;
      color: #c6c6c6;
      background: #fafafa;
    }
    
    .exchange-code .expired-copy:before{
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        width: calc(300% - 2px);
        height: calc(300% - 2px);
      border: 1px solid #d3d3d3;
      border-radius: 5px;
      -webkit-transform: scale(0.3333);
      transform: scale(0.3333);
      /*不加这个属性会导致absolute定位不再相对于relative定位的父元素，导致错位，主要是因为transform对绝对定位元素的影响，transform元素的影响还可以参考文章[CSS3 transform对普通元素的N多渲染影响](http://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/)*/
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
    }

效果如图  
![复制按钮][SouthEast]  
②：利用background-image:linear-gradient

background-image:linear-gradient(180deg,red 50%,transparent 50%);
    background-position:bottom;
    background-size:100% 1px;
    background-repeat:no-repeat;

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

\-webkit-transform: translate3d(0, 0, 0);  
或者 transform:translateZ(0);  
另外开启硬件加速后可能会导致页面频繁闪烁或者抖动可以尝试用一下方法解决  
\-webkit-backface-visibility:hidden；  
\-webkit-perspective:1000;

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

18: pointer-events  
今天遇到了一个需求：a元素不可点击，后来才发现使用这个属性就可以做到

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

取值：  
auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all  
除了auto和none适用于所有元素，其他都只能用在SVG元素上  
auto：与pointer-events属性未指定时的表现效果相同。  
none： 元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。  
使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（将会穿过父元素而指向位于其下面的元素）。  
对应的脚本特性为pointerEvents。

19：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;
    }

20:css各个选择器优先级原则  
!importan > 行内样式（style属性）> 内部样式（style标签）> 外部样式文件  
id > class（伪类选择器，属性选择器） > 元素选择器 > \*  
选择器的权重  
id（100）  
class = 属性选择器 = 伪类选择器（10）  
元素选择器（1）  
各个选择器的权重值相加，值越大，优先级越高。（值相等的时候，后定义的覆盖先定义的。）

[CSS3_ box-shadow]: http://blog.csdn.net/freshlover/article/details/7610269
[CSS3_linear-gradient]: http://www.cnblogs.com/rainman/p/5113242.html
[CSS3]: http://www.cnblogs.com/strick/p/5284661.html
[SouthEast]: /images/20220714/4347f896816c4308a49b7af537249236.png