关于css的部分API

1、:root

这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示  元素，除了优先级更高之外，与 html 选择器相同。

:root { 
    --first-color: #488cff; 
    --second-color: #ffff8c; 
} 
#firstParagraph { 
    background-color: var(--first-color); 
    color: var(--second-color); 
}

2、image-rendering

CSS 属性 image-rendering 用于设置图像缩放算法。它适用于元素本身，适用于元素其他属性中的图像，也应用于子元素。developer.mozilla.org/zh-CN/docs/…

<img class="image-crisp" src="/Users/mac/Desktop/static/img/3.png" width="250px">
<img class="image-auto" src= "/Users/mac/Desktop/static/img/3.png" width="250px">

.image-crisp {
    image-rendering:crisp-edges;
}

.image-auto {
    image-rendering:auto;
}

3、vertical-align

vertical-align 属性设置元素的垂直对齐方式 www.runoob.com/cssref/pr-p… 可能的值

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

<p>一个<img src="/Users/mac/Desktop/static/img/1.jpeg" width="100" height="50" />默认对齐的图像。</p>
<p>一个<img class="top" src="/Users/mac/Desktop/static/img/1.jpeg" width="100" height="50" />  text-top 对齐的图像。</p>
<p>一个<img class="bottom" src="/Users/mac/Desktop/static/img/1.jpeg" width="100" height="50" /> text-bottom 对齐的图像。</p>

4、::-webkit-scrollbar

CSS伪类选择器影响了一个元素的滚动条的样式，::-webkit-scrollbar 仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用.developer.mozilla.org/zh-CN/docs/…

你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:

::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    border-radius: 10px;
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.44,rgb(60,186,146)),color-stop(0.72,rgb(253,187,45)),color-stop(0.86,rgb(253,187,45)));
    transition: 0.3s ease-in-out;
}
::-webkit-scrollbar-track {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

效果

5、@supports 

CSS at-rule 关联了一组嵌套的CSS语句,这些语句被放置在一个CSS区块中,该区块以大括号分割, 还有一个由多个CSS声明检测组成的条件,它是一个键值组合, 由逻辑与,逻辑或,逻辑非组合而成. 这样的条件语句称为支持条件.

<div style='display: flex;height: 200px'></div>
@supports (display: flex) {
    div {
        background-color: #828fa7;
    }
}

效果

6、user-select:none;

现象：html中可能有些地方不想让用户复制文字，或是用a标签做了个点击按钮，点快的时候文字会被选中，很丑，这个时候可以使用下面的方案禁止文字选中。

原因：鼠标点快了文字会被选中。

解决方案：不同的浏览器设置的内容不一样，user-select不是一个W3C的标准，浏览器的支持不完成，需要对不同的浏览器进行调整。

body{ 
    -moz-user-select:none;/*火狐*/ 
    -webkit-user-select:none;/*webkit浏览器*/ 
    -ms-user-select:none;/*IE10*/ 
    -khtml-user-select:none;/*早期浏览器*/ 
    user-select:none; 
}
user-select有2个值（none表示不能选中文本，text表示可以选择文本）

效果

7、pointer-events:none;

禁止使用鼠标点击，以及选中

<h2>pointer-events: none：</h2>
<div class="ex1">访问 <a href="">不能跳转</a></div>

<h2>pointer-events: auto（默认）</h2>
<div class="ex2">访问 <a href="">可以跳转</a></div>

div.ex1 {
    pointer-events: none;
}

div.ex2 {
    pointer-events: auto;
}

效果

8、filter

属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。

可以对图片进行，两度，饱和度，清晰度，和色彩进行调试www.runoob.com/cssref/css3…

<img src="/Users/mac/Desktop/static/img/1.jpeg" alt="Pineapple" width="300" height="300">
<img class='img' src="/Users/mac/Desktop/static/img/1.jpeg" alt="Pineapple" width="300" height="300">

.img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

效果

9、outline

outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

<p>我是一段文字</p>

p {
    border:1px solid red;
    outline:green dotted thick;
}

效果

10、CSS属性 touch-action 用于设置触摸屏用户如何操纵元素的区域(例如，浏览器内置的缩放功能)。

auto

当触控事件发生在元素上时，由浏览器来决定进行哪些操作，比如对viewport进行平滑、缩放等。

none

当触控事件发生在元素上时，不进行任何操作。

pan-x

启用单指水平平移手势。可以与 pan-y 、pan-up、pan-down 和／或 pinch-zoom 组合使用。

pan-y

启用单指垂直平移手势。可以与 pan-x 、pan-left 、pan-right 和／或 pinch-zoom 组合使用。

manipulation

浏览器只允许进行滚动和持续缩放操作。任何其它被auto值支持的行为不被支持。启用平移和缩小缩放手势，但禁用其他非标准手势，例如双击以进行缩放。 禁用双击可缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件的需要。 这是“pan-x pan-y pinch-zoom”（为了兼容性本身仍然有效）的别名。

pan-left, pan-right,pan-up,pan-down 

启用以指定方向滚动开始的单指手势。 一旦滚动开始，方向可能仍然相反。 请注意，滚动“向上”（pan-up）意味着用户正在将其手指向下拖动到屏幕表面上，同样 pan-left 表示用户将其手指向右拖动。 多个方向可以组合，除非有更简单的表示（例如，“pan-left pan-right”无效，因为“pan-x”更简单，而“pan-left

pan-down”有效）。

pinch-zoom

启用多手指平移和缩放页面。 这可以与任何平移值组合

11、CSS3 background-clip 属性

background-clip 属性规定背景的绘制区域

值	描述	测试
border-box	背景被裁剪到边框盒。	测试
padding-box	背景被裁剪到内边距框。	测试
content-box	背景被裁剪到内容框。	测试

<div>
  这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>

div
{
    width:300px;
    height:300px;
    padding:50px;
    background-color:yellow;
    background-clip:content-box;
    border:2px solid #92b901;
}

效果

12、CSS3 outline-offset 属性

outline-offset 属性对轮廓进行偏移，并在边框边缘进行绘制

CSS outline 属性 outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的用。

<div>这个 div有一个轮廓边界15 px边境外的边缘。</div>
div {
    margin:20px;
    width:150px;
    padding:10px;
    height:70px;
    border:2px solid black;
    outline:2px solid red;
    outline-offset:15px;
}

效果

13、box-shadow

<div></div>
div {
  width:300px;
  height:100px;
  background-color:yellow;
  box-shadow: 10px 10px 5px #888888;
}

效果