无标题文章

## 你可能会用到的css属性

> css语言相对简单，css的属性值就这么多，没有太多逻辑性，没有算法，熟记各个属性就差不多。今天分享一下css一些新特性（可能是对我来说比较新的）和css的创意，可能对大家在做页面的时候有所帮助。

## 一、@suports 

众所周知，不同的浏览器（不管是现代浏览器还是老版本的IE浏览器）对Web页面的解析都是不一样，为了让Web页面在这些浏览器下渲染达到基本一致的情况，给用户更好的体验，我们必须为他们写不同的样式代码@supports”条件判断规则，它允许我们可以根据浏览器对CSS特性的支持情况来定义不同的样式，我们就可以使用@supports都是设置一个老的样式做为备份，然后新的样式写在@supports中用来支持现代浏览器。例如“flex”弹性布局，到目前有下些版本浏览器不支持，但你使用这个属性，为了让其他的浏览器不至于布局混乱

语法规则

```css

@supports <条件规则>{


}

```

@supports中的“**条件规则**”可以声明一条或者几个由不同的逻辑运算符相结合的声明（比如说，非（not），或（or），与（and）等）。而且还可以使用括号来确定其操作的优先级关系,例如

```css

// 如果浏览器支持“display:flex”属性，那么在“section”元素上就运用“display:flex”样式。

（display：flex）

@supports (display:flex) {

  section { display: flex }

  ...

}

```

@supports还可以根据不同的逻辑运算符相结合

- not 逻辑

  主要作用是，在不支持新特性时，可以提供备用样式。换过来也可以理解，如果你的浏览器不支持@supports条件判断中的样式，你可以通过@supports为浏览器提供一种备用样式

  ```css

  @supports not (display: flex){

    #container div{float:left;}

  }

  ```

- and 逻辑

​      supports的条件判断中也可以使用“and”逻辑声明。用来判断是否支持多个属性

```css

@supports (display: table-cell) and (display: list-item) and (display:run-in){

  /*样式*/

}

```

- Or逻辑

  ```css

  @supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {

    section {

      display: -webkit-flex;

      display: -moz-flex;

      display: flex;

      …

    }         

  }

  ```

- js  css.supports

  跟CSS的`@supports`标记相对应的，JavaScript里提供了window.`CSS.supports`方法。`CSS.supports`的接口规范提供两种调用方法。第一种方法是使用两个参数：一个是属性名，另一个是属性值：

  ```js

  var supportsFlex = CSS.supports("display", "flex");

  ```

## 二、float

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动，float的设置和word中的浮动类似

![image-20190517110159526](/Users/lly/Library/Application Support/typora-user-images/image-20190517110159526.png)

CSS Shapes属性 允许我们定义文本环绕的几何形状。这些形状可以是圆、椭圆、简单或复杂的多边形，甚至图像和渐变。Shapes 的一些实际设计应用可能是圆形头像周围显示圆形环绕文本，全屏背景图片的简单部位上面展示文本，以及在文章中显示首字下沉。CSS Shapes 已经获得了现代浏览器的广泛支持。

### 基本的形状类型：

参考链接<https://drafts.csswg.org/css-shapes/#propdef-shape-outside>

我们可以通过将下列函数值应用于 `shape-outside` 属性来定义 CSS 中的各种基本形状：

- `circle()`

- `ellipse()`

- `inset()`

- `polygon()`

```css

.circle {

  float: left;

  height: 200px;

  width: 200px;

  shape-outside: circle();

}

```

```

.ellipse {

  float: left;

  shape-outside: ellipse();

  clip-path: ellipse();

  width: 150px;

  height: 300px;

  background: linear-gradient(to top right, #F17BB7, #AD84E3);

}

```

```

// 椭圆具有长轴和短轴

ellipse(75px 150px);

```

```

// 300px 的正方形，每条边内嵌 75px。这将给我们留下 150px 周围有 75px 空间。

.inset {

  float: left;

  shape-outside: inset(75px);

  clip-path: inset(75px);

  width: 300px;

  height: 300px;

  background: linear-gradient(#58C2ED, #1B85DC);

}

```

下面的设计就可以实现啦

![image-20190517125548491](/Users/lly/Library/Application Support/typora-user-images/image-20190517125548491.png)

![image-20190517125653824](/Users/lly/Library/Application Support/typora-user-images/image-20190517125653824.png)

shape-outside**的[CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) 属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。 默认情况下，内联内容包围其边距框; `shape-outside`提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside

https://www.html.cn/tool/css-clip-path/

https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path

## 三、svg  change color of svg on hover

​      参考文章: https://css-tricks.com/change-color-of-svg-on-hover/

- inline svg

  ```css

  svg {

    width: 70px;

    height: 70px;

  }

  svg:hover {

    fill: red;

  }


  ```

  ```html

  <div>


    <svg width="24" height="24" viewBox="0 0 24 24">

      <path d="M5,20.5A3.5,3.5 0 0,1 1.5,17A3.5,3.5 0 0,1 5,13.5A3.5,3.5 0 0,1 8.5,17A3.5,3.5 0 0,1 5,20.5M5,12A5,5 0 0,0 0,17A5,5 0 0,0 5,22A5,5 0 0,0 10,17A5,5 0 0,0 5,12M14.8,10H19V8.2H15.8L13.86,4.93C13.57,4.43 13,4.1 12.4,4.1C11.93,4.1 11.5,4.29 11.2,4.6L7.5,8.29C7.19,8.6 7,9 7,9.5C7,10.13 7.33,10.66 7.85,10.97L11.2,13V18H13V11.5L10.75,9.85L13.07,7.5M19,20.5A3.5,3.5 0 0,1 15.5,17A3.5,3.5 0 0,1 19,13.5A3.5,3.5 0 0,1 22.5,17A3.5,3.5 0 0,1 19,20.5M19,12A5,5 0 0,0 14,17A5,5 0 0,0 19,22A5,5 0 0,0 24,17A5,5 0 0,0 19,12M16,4.8C17,4.8 17.8,4 17.8,3C17.8,2 17,1.2 16,1.2C15,1.2 14.2,2 14.2,3C14.2,4 15,4.8 16,4.8Z"></path>

  </svg>

  <svg width="24" height="24" viewBox="0 0 24 24">

      <path d="M11.5,22C11.64,22 11.77,22 11.9,21.96C12.55,21.82 13.09,21.38 13.34,20.78C13.44,20.54 13.5,20.27 13.5,20H9.5A2,2 0 0,0 11.5,22M18,10.5C18,7.43 15.86,4.86 13,4.18V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V4.18C7.13,4.86 5,7.43 5,10.5V16L3,18V19H20V18L18,16M19.97,10H21.97C21.82,6.79 20.24,3.97 17.85,2.15L16.42,3.58C18.46,5 19.82,7.35 19.97,10M6.58,3.58L5.15,2.15C2.76,3.97 1.18,6.79 1,10H3C3.18,7.35 4.54,5 6.58,3.58Z"></path>

  </svg>


    <svg width="24" height="24" viewBox="0 0 24 24">

      <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>

  </svg>


  </div>

  ```

- ### SVG Symbol / Use

  There is such thing as [an SVG sprite](https://css-tricks.com/svg-sprites-use-better-icon-fonts/), which is a group of SVGs turned into `<symbol>` elements such that any given icon can be referenced easily with a `<use>` element.

  ```html

    <div>

        <svg>

            <use xlink:href="#bike" />

        </svg>

        <svg>

            <use xlink:href="#bell" />

        </svg>

        <svg>

            <use xlink:href="#arrow" />

        </svg>

  </div>

  ```

  ```css

  svg {

      width: 70px;

      height: 70px;

    }


  svg:hover {

      fill: red;

  }

  ```

- ### SVG background images

  ```css

    .icon-bike {

              background-image: url(...);

          }


          .icon-bike:hover,

          .icon-bike:focus {

              background-image: url(...);

    }

  ```

filter属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染https://codepen.io/sosuke/pen/Pjoqqp

```css

icon-bike {  

    background-image: url(...); 

}  

.icon-bike:hover, .icon-bike:focus {  

      filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);

}

```

  SVG also has `object`, which is kinda neat in that it had a built-in fallback back in the day — although browser support is so good these days, I honestly have never used it. But if you're using it, you would probably have to use this `filter` technique to swap color on hover.

```css

  .icon {

    display: inline-block;

    width: 70px;

    height: 70px;

    background-size: cover;

  }

  .icon-bike:hover,

  .icon-bike:focus {

    filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);

  }

  .icon-bell:hover,

  .icon-bell:focus {

    filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);

  }

  .icon-arrow:hover,

  .icon-arrow:focus {

    filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);

  }

```

- ### Use a mask instead of a background image

  ```css

  .icon-bike {

    mask: url();

  }

  .icon-bell {

    mask: url();

  }

  .icon-arrow {

    mask: url('.');

  }

  .icon {

    display: inline-block;

    width: 70px;

    height: 70px;

    background: black;

    mask-size: cover;

  }

  .icon:hover,

  .icon:focus {

    background: red;

  }


  ```

- ### SVG background images as data URLs

  Using a variable for the internal fills.

  ```css

  $bike: "...url"

  $bikeHover: "...url;

  $bell: "...url";

  $bellHover: "...url";

  $arrow: "...url";

  $arrowHover: "...url;


  .icon {

    display: inline-block;

    width: 70px;

    height: 70px;

  }

  .icon-bike {

    background-image: url("data:image/svg+xml, #{$bike}");

    background-size: cover;

  }

  .icon-bike:hover,

  .icon-bike:focus {

    background-image: url("data:image/svg+xml, #{$bikeHover}");

  }

  .icon-bell {

    background-image: url("data:image/svg+xml, #{$bell}");

    background-size: cover;

  }

  .icon-bell:hover,

  .icon-bell:focus {

    background-image: url("data:image/svg+xml, #{$bellHover}");


  }

  .icon-arrow {

    background-image: url("data:image/svg+xml, #{$arrow}");

    background-size: cover;

  }

  .icon-arrow:hover,

  .icon-arrow:focus {

    background-image: url("data:image/svg+xml, #{$arrowHover}");

  }

  ```

## 四、 滚动特性

一直以来，如果仅使用CSS来控制滚动条，我们只能借用`overflow`属性

```css

overflow: auto | scroll

overflow-x: auto | scroll;

或者 overflow-y: auto | scroll

```

除了滚动体验之外，视觉体验相对而言更为糟糕，不同系统的浏览器渲染的滚动条风格也不是一致

![image-20190517134057774](/Users/lly/Library/Application Support/typora-user-images/image-20190517134057774.png)

我们先来看一下https://css-tricks.com/archives/

实 际上CSS的还有一些特性可以让用户有一个更好的体验，在Webkit内核提供了`-webkit-scrollbar`（由七个伪元素）属性，可以轻易的帮助我们实现自定义（个性化）滚动条UI风格在介绍这七个伪元素属性之前，先来看一下滚动条的结构:下图是滚动的滑块和滚动的轨道

![image-20190517070001006](/Users/lly/Library/Application Support/typora-user-images/image-20190517070001006.png)

![image-20190517070200468](/Users/lly/Library/Application Support/typora-user-images/image-20190517070200468.png)

![image-20190515103524143](/Users/lly/Library/Application Support/typora-user-images/image-20190515103524143.png)

scrollbar在线生成器。https://darrylhuffman.com/sites/Scrollbar-gen/

也就是说，我们可以像制作进度条一样来处理滚动条UI效果。不同的是采用的CSS属性不一样`-webkit-scrollbar`提供了七个伪元素，通过这些伪元素，我们可以来定制滚动条外观效果。这七个伪元素分别是：

1. `::-webkit-scrollbar` the background of the bar itself.

2. `::-webkit-scrollbar-button` the directional buttons on the scrollbar.

3. `::-webkit-scrollbar-track` the empty space “below” the progress bar. // 滚动的轨道

4. `::-webkit-scrollbar-track-piece` the top-most layer of the the progress bar not covered by the thumb. //滚动条没有滑块的轨道部分

5. `::-webkit-scrollbar-thumb` the draggable scrolling element resizes depending on the size of the scrollable element. // 滚动条的滚动滑块

6. `::-webkit-scrollbar-corner` the bottom corner of the scrollable element, where two scrollbar meet. // 水平和垂直交互的部分

7. `::-webkit-resizer` the draggable resizing handle that appears above the scrollbar-corner at the bottom corner of some elements. // 类似textarea可以拖动的按钮部分

有了上面7个属性。如下图的两个自定义的滚动条就可以轻易的实现

![image-20190515103437822](/Users/lly/Library/Application%20Support/typora-user-images/image-20190515103437822.png)

```css

.scrollbar {

            background-color: #F5F5F5;

            float: left;

            height: 300px;

            margin-bottom: 25px;

            margin-left: 22px;

            margin-top: 40px;

            width: 65px;

            overflow-y: scroll;

        }

        .force-overflow {

            min-height: 450px;

        }

        .scrollbar::-webkit-scrollbar{

            width: 6px;

            background-color: #f5f5f5;

        }

        .scrollbar::-webkit-scrollbar-thumb {

            background-color: #000000;

        }

```

![image-20190515110512311](/Users/lly/Library/Application%20Support/typora-user-images/image-20190515110512311.png)

```css

.scrollbar {

            background-color: #F5F5F5;

            float: left;

            height: 300px;

            margin-bottom: 25px;

            margin-left: 22px;

            margin-top: 40px;

            width: 65px;

            overflow-y: scroll;

        }

        .force-overflow {

            min-height: 450px;

        }

        .scrollbar::-webkit-scrollbar{

            width: 6px;

            background-color: #f5f5f5;

        }

        .scrollbar::-webkit-scrollbar-thumb {

            background-color: #000000;

        }

```

兼容性：

![image-20190515111213674](/Users/lly/Library/Application Support/typora-user-images/image-20190515111213674.png)

顠红的较少了，或许大家更为安心了。如果你想做得更好，也可以用`@supports`特性来做降级处理。如果浏览器支持`-webkit-scrollbar`，那么采用自定义属性，如果不支持，则采用默认的滚动条风格

- 1. 视觉滚动(https://dumengjie.github.io/2017/07/24/%E8%AF%91-%E9%AB%98%E6%80%A7%E8%83%BD%E8%A7%86%E5%B7%AE%E6%BB%9A%E5%8A%A8/) *

    保证视差滚动与页面滚动位置同步

![img](https://www.w3cplus.com/sites/default/files/blogs/2018/1808/scrolling-10.gif)

![img](https://www.w3cplus.com/sites/default/files/blogs/2018/1805/scroll-6.gif)

参考jquery.scrollTo

```js

window.scrollBy({ "behavior": "smooth", "left": left, "top": top }); window.scrollTo({ "behavior": "smooth", "left": left, "top": top });

```

CSSOM View Module](https://dev.w3.org/csswg/cssom-view/)提供了一个新属性`scroll-behavior`。直接使用这个属性就可以轻易的帮助我们实现丝滑般的滚动效果。

> CSS属性 `scroll-behavior` 为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。

`scroll-behavior`有两个关键词值：

1. auto：滚动框立即滚动

2. smooth：滚动框通过一个用户代理定义的时间段使用定义的时间函数来实现平稳的滚动，用户代理平台应遵循约定

```

html { scroll-behavior:smooth; }

```

兼容性：

![image-20190515133753541](/Users/lly/Library/Application Support/typora-user-images/image-20190515133753541.png)

https://github.com/iamdustan/smoothscroll

- 1. 幻灯片效果

![img](https://www.w3cplus.com/sites/default/files/blogs/2018/1808/scrolling-12.gif)

​                https://www.w3cplus.com/css3/introducing-css-scroll-snap-points.html

对于这样的效果，被称为**Scroll Snap**效果，实现类似的效果，有许多[JavaScript库](https://projects.lukehaas.me/scrollify/#home)可供你[选择](https://benoit.pointet.info/stuff/jquery-scrollsnap-plugin/)。使用[CSS Scroll Snap Points](https://www.w3.org/TR/css-snappoints-1/)来实现这个效果

css scroll snap points的实现原理

> 通过在`x`以及`y`轴上定义“snap points”来控制滚动容器的滚动行为。当用户在水平或者垂直方向滚动时，利用捕捉点，滚动容器会捕捉到内容区域的某一点

**scroll-snap-type**：定义在滚动容器中的一个snap点如何被严格的执行

**scroll-snap-type-x**：定义在滚动容器中水平轴上snap点如何被严格的执行

**scroll-snap-type-y**：定义在滚动容器中垂直轴上snap点如何被严格的执行

**scroll-snap-coordinate**：结合元素的最近的祖先元素滚动容器的`scroll-snap-destination` 定义的轴，定义了元素中`x`和`y`坐标偏移的位置。如果元素已经变型，snap坐标也以相同的方式进行变型，为了使元素的snap点向元素一样被显示。

**scroll-snap-destination**：定义滚动容器的可视化viewport 中元素snap点的`x`和`y`坐标位置

**scroll-snap-points-x**：定义滚动容器中内容的snap点的水平位置

**scroll-snap-points-y**：定义滚动容器中内容的snap点的垂直位置

**scroll-snap-align**：元素相对于其父元素滚动容器的对齐方式。它具有两个值，x 和 y。如果你只使用其中的一个，另外一个值默认相同

**scroll-snap-padding**：与视觉窗口的滚动容器有关。工作原理也相近与正常的内边距，值设置一致。此属性具有动画效果，所以如果你想要对齐snap点进行滚动，这将是一个很好的而选择。

```css

.scroller {

    scroll-snap-type: mandatory; /* older spec implementation */

    scroll-snap-destination: 0% 100%;

    scroll-snap-points-x: repeat(100%);

}

```

1. 滚动指示器

滚动页面，观察最顶端的条状进度

```css

body {

    position: relative;

}

.indicator {

    position: absolute;

    top: 0; right: 0; left: 0; bottom: 0;

    background: linear-gradient(to right top, teal 50%, transparent 50%) no-repeat;

    background-size: 100% calc(100% - 100vh);

    z-index: 1;

    pointer-events: none;

    mix-blend-mode: darken;

}

.indicator::after {

    content: '';

    position: fixed;

    top: 5px; bottom: 0; right: 0; left: 0;

    background: #fff;

    z-index: 1;

}

```

CSS提供的一些新特性：`scroll-behavior`、`overscroll-behavior`、**CSS Scroll Snap Points**、`::-webkit-scrollbar`、`overflow-scrolling: touch`和`pointer-events:none`

## 五、css counters

https://www.w3cplus.com/css3/css-generated-content-counters.html

https://www.w3cplus.com/css3/css-counters.html

https://www.smashingmagazine.com/2013/04/css-generated-content-counters/

CSS Counters其实就是一计数器，早期在CSS中计数器仅存在于`ul`和`ol`元素。如果要使用在`div`这样的元素上，只能通过`list-style-image`或者是元素的`backgroud-image`来实现。在[CSS2.1的规范](http://www.w3.org/TR/CSS2/)中介绍了一种新技术，允许开发人员使用伪类`:after`、`:before`或者伪元素`::after`、`::before`给任何元素创建自动递增计数器——类似于列表中的项目符号(`list-style-type`)

优点：

相比传统的`ol`,`ul`列表计数，CSS计数器的优势就在于灵活与强大，不足就是IE6/IE7不支持。

普照规则第一条，普照源唯一。所以，我们可以在头尾放两个差距甚远的列表，然后，这些列表自动显示序号。而`ol/ul`只能写死`start`实现，很不灵活，一旦列表有删减，就嗝屁了。

由于计数器是伪元素控制显示的。因此，我们几乎可以应用各种CSS样式，各种定位等。所以，基本上，只要有有序序号呈现的地方，就能使用CSS计数器。

![image-20190515141247483](/Users/lly/Library/Application Support/typora-user-images/image-20190515141247483.png)

讲counter之前，先提一下content，content是简单的通过css在dom树上创建一个抽象的结构,content支持下面几种类型

- none, normal：伪内容不生成；

- 'String'：表示一个包含在引号中的文本字符串；

- url()：这个方法可以让我们插入一个外部资源(通常是一个图片)，也可以使用background-image

- counter()

- attr(attribute)：这个方法让我们可以插入给定元素的属性值；

```css

a:before {

  content: "link";

}

```

```css

a:before {

  content: url(link.png);

}

```

```css

a[href]:after {

  content: "( " attr(href) " )";

}

```

```css

div:before {

  content: counter(term);

}

```

自动增长的数值是由css的两个属性控制的，他们是counter-reset 和counter-increment

```css

// 用于选择器，主要用于标识该作用域，可以自定义

counter-reset:<identifier>

// 用来表示计数器与实际相关联的范围,第一个参数就是选择器，第二个可选参数是增长的整数值

counter-increment:[ <identifier> <integer>? ]+ | none | inherit

```

例子：

```html

// html

    <h3>Introduction</h3>

    <h3>Body</h3>

    <h3>Conclusion</h3>

```

```css

  body {

            counter-reset: section;

            /* 重置计数器成0 */

  h3:before {

            counter-increment: section;

            /* 增加计数器值 */

            content: "Section "counter(section) ": ";

            /* 显示计数器 */

  }

}

```

本文中所涉及到的内容，`content`属性主要与`counter([<identifier>])`

```css

h2{ counter-increment: section;

    &:before{

        content:"Chapter" counter(Chapter) "." counter(section);

    }

}

```

```css

#demo8 ol { counter-reset: section 6; }

#demo8 ol li { counter-increment: section -1; }

#demo8 ol li:before { content: counter(section) ". "; }

```

counter 支持两个参数，两个参数之间用","隔开，第一个参数是counter-increment定义的属性值indentifier，第二个参数是计数器的风格类似list-style-type,这个值于list-style-type一样https://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style-type>

- disc

- circle

- square

- decimal

- decimal-leading-zero

  ....

参考文档：<https://www.w3cplus.com/css3/css-counters.html>

## 六、变量

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

CSS 变量是由CSS作者定义的实体，其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置变量名，并使用特定的 [var() ](https://developer.mozilla.org/zh-CN/docs/Web/CSS/var)来访问。（比如  color: **var(--main-color)**; 注意css变量是区分大小写的

```c s sc s

// 声明一个局部的变量

.test {

  --main-color: red

}

.test {

    background-color: var(--main-color)

}

```

- css变量受层级的影响·

  ```css

  :root {

      --main-color: blue;

  }

  .alert {

      --main-color: red;

  }

  p {

      color: var(--main-color);

  }

  ```

  ```html

  <--! HTML -->

  <html>

    <head>

      <!-- head code here -->

    </head>


    <body>

      <div>

        <p>blue 的段落</p>

        <div class="alert">

          <p>red 的段落</p>

        </div>

      </div>

    </body>

  </html>

  ```

  在div标签中拥有 `.alert` 类的段落会是红色，因为它的值继承自局部作用域里的 `--main-color` ，这个变量的值是 *red* 。

- 内联元素中css的变量

  ```html

  <div style="--size:200px;--color:#FFFFFF;">

    <p>Component Size from inline style</p>

  </div>

  ```

  ```css

  div{

    width: var(--size);

    height: var(--size);

  }

  div p{text-align: center; color:var(--color) }


  ```

- Var 函数

  ```css

  :root{

    --background: green;

  }


  .blocks{

    border: 4px solid black;

    background: red;

  }


  .blocks div{

    outline: 4px solid black;

    background: var(--background);

  }

  ```

  ```html

  <div class="blocks block-1">

    <div></div>

  </div>


  ```

  有时可能会出现无法定义CSS变量的情况。在这种情况下，您可以将回退值设置为 `var()` 函数中的第二个参数

  ```css

  background: var(--background, green);

  ```

  你也可以嵌套多个`var()` 函数 `background: var(--color1, var(--color2, var(--color3, #00BCD4)));`。

- 结合calc函数

  ![image-20190516192709121](/Users/lly/Library/Application%20Support/typora-user-images/image-20190516192709121.png)

- 结合媒体查询

  您甚至可以在媒体查询中重新设置变量值，并让这些新值在任何地方使用它们级联，特别要说明的是：这是预处理器变量无法实现的。

  查看此示例，其中媒体查询更改用于设置非常简单网格的变量，打开 codepen，然后尝试调整浏览器的大小，你可以看到媒体查询中的 CSS 变量依然有效。

- ```css

  :root{

    --width: 25%;

    --content: 'This is desktop';

  }

  @media only screen and (max-width: 767px){

    :root{

      --width:50%;

      --content: 'This is mobile';

    }

  }

  @media only screen and (max-width: 480px){

    :root{

      --width:100%;

    }

  }


  div{

    width: calc(var(--width) - 20px);

    height: 100px;

  }

  div:before{

    content: var(--content);

  }

  ```

  除此之外还可以应用到svg，一些动画上面来通过变量来计算属性值。

- 通过javascript来操作css变量

  可以直接通过JavaScript代码访问CSS变量。通过 `getComputedStyle`，`setProperty`和 `getPropertyValue`从JavaScript访问CSS变量非常简单。 要获取变量，请使用 `getPropertyValue()`。

  假设在你的CSS文件中，有一个叫做 `--left-pos` 的变量，作用在 `.sidebar` 选择器中，值为 `100px`

  ```

  .sidebar {

      --left-pos: 100px;

  }


  ```

  ```js

  // 缓存你即将操纵的元素

  const sidebarElement = document.querySelector('.sidebar');


  // 缓存sidebarElement的样式于cssStyles中

  const cssStyles = getComputedStyle(sidebarElement);


  // 获取 --left-pos CSS变量的值

  const cssVal = String(cssStyles.getPropertyValue('--left-pos')).trim();


  // 将CSS 变量的值打印到控制台: 100px

  console.log(cssVal);

  ```

  ```js

  /* 从 :root 根元素获取变量值 */

  document.documentElement.style.getPropertyValue('--background');


  /* 从 .block-3 元素获取变量值 */

  document.querySelector('.block-3').style.getPropertyValue('--background');

  ```

- 浏览器对css变量的支持效果 <https://caniuse.com/#feat=css-variables>

  ![image-20190516195009415](/Users/lly/Library/Application%20Support/typora-user-images/image-20190516195009415.png)

兼容性处理

```css

section {

    color: gray;

}

@supports(--css: variables) {

    section {

        --my-color: blue;

        color: var(--my-color, 'blue');

    }

}

```

因为IE/Edge支持 `@supports` ，所以上面的代码会生效。如果在`var()`函数中添加一个后备值，你的代码将会更加健壮，在支持的更加不好的浏览器中也能优雅降级。

## 七、混合模式和滤镜

https://bennettfeely.com/image-effects

https://codepen.io/airen/full/bZJvaW>

![image-20190515140632896](/Users/lly/Library/Application Support/typora-user-images/image-20190515140632896.png)

- mix-blend-mode

- background-blend-mode

- isolation

- filter

## 八、css动画

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,125评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,293评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,054评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,077评论 1赞 291
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,096评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,062评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,988评论 3赞 417
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,817评论 0赞 273
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,266评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,486评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,646评论 1赞 347
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,375评论 5赞 342
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,974评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,621评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,642评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,538评论 2赞 352

推荐阅读更多精彩内容