【CSS】必备的22个CSS小技巧

大家好，今天我们将会介绍一些非常实用的CSS小技巧，让我们开始吧！

混合模式

之前Firefox和Safari浏览器已经开始支持类似Photoshop的混合模式，但是在Chrome和Opera浏览器中需要添加前缀。举个栗子：

1// 你也可以尝试不同的样式
2
3.blend {
4    background: #fff;
5}
6.blend img {
7    mix-blend-mode: darken; 
8}

体验地址：http://ilyashubin.github.io/FilterBlend/

渐变边框

现在，你甚至可以在边框中使用渐变。 要使用渐变边框非常简单，只需要设置一个更低​​​z-index​​的伪元素即可：

1.box {
 2  margin: 80px 30px;
 3  width: 200px;
 4  height: 200px;
 5  position: relative;
 6  background: #fff;
 7  float: left;
 8}
 9.box:before {
10      content: '';
11      z-index: -1;
12      position: absolute;
13      width: 220px;
14      height: 220px;
15      top: -10px;
16      left: -10px;
17      background-image: linear-gradient(90deg, yellow, gold);
18}

具体的例子可以看这里（​​https://jsfiddle.net/4qypuono/​​），或者看这里（​​https://codepen.io/anon/pen/jEOGJe​​）使用的是​​background-clip​​​和​​background-origin​​属性。

在不久的将来，也许所有浏览器都将支持​​border-image​​属性，最终的代码会和下面一样：

1.box {
2    border-image: linear-gradient(to bottom, #000000 0%, #FFFFFF 100%); 
3    border-image-slice: 1; /* set internal offset */
4}

z-index的过渡

也许你不知道​​z-index​​同样支持过渡！在过渡的每一步中，它的值都不发生改变，所以你以为它不支持过渡——但其实它支持。

 举个栗子→（​​http://zomigi.com/demo/z-index_transition.html​​）

currentColor

我们可以使用这个方法来侦测当前的颜色，以避免经常地重复定义它。

 这个方法在使用SVG图标的时候非常有用，因为它们的颜色由其父元素决定。通常我们是这么做的：

1.button {
 2  color: black;
 3}
 4.button:hover {
 5  color: red;
 6}
 7.button:active {
 8  color: green;
 9}
10
11.button svg {
12  fill: black;
13}
14.button:hover svg {
15  fill: red;
16}
17.button:active svg {
18  fill: green;
19}

但我们可以使用​​currentColor​​这么做：

1svg {  
 2  fill: currentColor;
 3}
 4
 5.button {
 6  color: black;
 7  border: 1px solid currentColor;
 8}
 9.button:hover {
10  color: red;
11}
12.button:active {
13  color: green;
14}

附上其它带有伪元素的例子：

1a {  
 2  color: #000;
 3}
 4a:hover {  
 5  color: #333;
 6}
 7a:active {  
 8  color: #666;
 9}
10
11a:after,  
12a:hover:after,  
13a:active:after {  
14  background: currentColor;
15  ...
16}

Object Fit

你是否还记得为了解决一些问题而给一幅背景图设置​​background-size​​属性的时刻呢？

现在你可以使用​​object-fit​​属性啦，webkit浏览器都支持它，Firefox也将在近期予以支持。

1.image__contain {
 2  object-fit: contain; 
 3} 
 4.image__fill {
 5  object-fit: fill; 
 6}
 7.image__cover {
 8  object-fit: cover; 
 9}
10.image__scale-down {
11  object-fit: scale-down;
12}

举个栗子→（​​https://codepen.io/CSSKing/pen/XJEZeG​​）

单选框和复选框的样式

让我们一起不使用图片来设置复选框的样式：

1<!-- html -->
2<input type="checkbox" id="check" name="check" />
3<label for="check">Checkbox</label>

1<!-- css -->
 2input[type=checkbox] {display: none;}
 3
 4input[type=checkbox] + label:before {  
 5    content: "";
 6    border: 1px solid #000;
 7    font-size: 11px;    
 8    line-height: 10px;
 9    margin: 0 5px 0 0;
10    height: 10px;
11    width: 10px;
12    text-align: center;
13    vertical-align: middle;
14}
15
16input[type=checkbox]:checked + label:before {  
17    content: "¹3";
18}

正如你所看见的，我们隐藏了原有的复选框，改为使用伪元素和伪类​​:checked​​（IE9+）来表现它。

当它被选中时，一个设置在​​content​​里的Unicode编码的字符将会显示出来。

值得注意的是，Unicode编码在CSS和HTML中的写法是不一样的。在CSS中它是一个以反斜杠为开始的十六进制数，而在HTML中它是十进制的，比如​​✓​​。 接着为我们的复选框添加一些动画效果：

1<!-- checkbox -->
 2input[type=checkbox] + label:before {  
 3    content: "¹3";
 4    color: transparent;
 5    transition: color ease .3s;
 6}
 7input[type=checkbox]:checked + label:before {  
 8    color: #000;
 9}
10
11<!-- radio -->
12input[type=radio] + label:before {  
13    content: "AB";
14    border: 1px solid #000;
15    border-radius: 50%;
16    font-size: 0;    
17    transition: font-size ease .3s;
18}
19input[type=radio]:checked + label:before {  
20    font-size: 10px;    
21}

这里（​​https://unicode-table.com/en/​​）是所有的Unicode编码，以及可以在这里（​​https://codepen.io/anon/pen/CdzwB​​）进行体验。

CSS中的计数器

总所周知CSS中是可以使用计数器的：

1<!-- html -->
2<ol class="list">  
3    <li>a</li>
4    <li>b</li>
5    <li>c</li>
6</ol>

1<!-- css -->
 2.list {
 3    counter-reset: i; //reset conunter
 4}
 5.list > li {
 6    counter-increment: i; //counter ID
 7}
 8.list li:after {
 9    content: "[" counter(i) "]"; //print the result
10}

我们定义了一个ID在​​counter-reset​​​属性中作为初始值（默认为0）。你可以设置另一个值在​​counter-increment​​属性中作为每一步的递增值。

高级CSS计数器

你可以计算出有多少个复选框被用户勾选了：

1<!-- html -->
 2<div class="languages">  
 3  <input id="c" type="checkbox"><label for="c">C</label>
 4  <input id="C++" type="checkbox"><label for="C++">C++</label>
 5  <input id="C#" type="checkbox"><label for="C#">C#</label>
 6  <input id="Java" type="checkbox"><label for="Java">Java</label>
 7  <input id="JavaScript" type="checkbox"><label for="JavaScript">JavaScript</label>
 8  <input id="PHP" type="checkbox"><label for="PHP">PHP</label>
 9  <input id="Python" type="checkbox"><label for="Python">Python</label>
10  <input id="Ruby" type="checkbox"><label for="Ruby">Ruby</label>
11</div>  
12<p class="total">  
13  Total selected:
14</p>

1<!-- css -->
 2.languages {
 3  counter-reset: characters;
 4}
 5input:checked {  
 6  counter-increment: characters;
 7}
 8.total:after {
 9  content: counter(characters);
10}

你也可以制作一个简单的计算器：

1<!-- html -->
 2<div class="numbers">  
 3  <input id="one" type="checkbox"><label for="one">1</label>
 4  <input id="two" type="checkbox"><label for="two">2</label>
 5  <input id="three" type="checkbox"><label for="three">3</label>
 6  <input id="four" type="checkbox"><label for="four">4</label>
 7  <input id="five" type="checkbox"><label for="five">5</label>
 8  <input id="one-hundred" type="checkbox"><label for="one-hundred">100</label>
 9</div>  
10<p class="sum">  
11  Sum 
12</p>

1<!-- css -->
 2.numbers {
 3  counter-reset: sum;
 4}
 5
 6#one:checked { counter-increment: sum 1; }
 7#two:checked { counter-increment: sum 2; }
 8#three:checked { counter-increment: sum 3; }
 9#four:checked { counter-increment: sum 4; }
10#five:checked { counter-increment: sum 5; }
11#one-hundred:checked { counter-increment: sum 100; }
12
13.sum::after {
14  content: '= ' counter(sum);
15}

它同样得以运行，请看具体的DEMO（​​https://codepen.io/CSSKing/pen/vEeMey​​）和文章（​​https://codersblock.com/blog/fun-times-with-css-counters/​​）。

不使用图片的菜单图标

你记得你有多么经常被迫需要一个“汉堡”图标吗？

这里有至少3个方式去实现它：

1、 Shadows

1.shadow-icon {
 2  position: relative;
 3}
 4.shadow-icon:after {
 5  content: "";
 6  position: absolute;
 7  left: 0;
 8  top: -50px;
 9  height: 100%;
10  width: 100%;
11  box-shadow: 0 5px 0 #000, 0 15px 0 #fff, 0 25px 0 #000, 0 35px 0 #fff, 0 45px 0 #000;
12}

2、 Gradient

1.gradient-icon {
2    background: linear-gradient(to bottom, #000 0%, #000 20%, transparent 20%, transparent 40%, #000 40%, #000 60%, transparent 60%, transparent 80%, #000 80%, #000 100%);
3}

3、 UTF-8 你可以直接使用标准符号：☰ (Unicode: U+2630, HTML: ☰)。你也可以像其他元素那样灵活设置它的颜色或大小。

 你也可以使用SVG，字体图标，或者通过伪元素设置的​​border​​边框。

@Supports

这是一个新的叫做​​supports​​的CSS表达式。顾名思义，它可以检测某些设定是否被浏览器所支持，并非所有的浏览器都支持它，但是你仍然可以使用它作为基本的检测手段：

1@supports (display: flex) {
 2    div { display: flex; }
 3}
 4
 5/*You can check prefixes*/
 6@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {
 7    section {
 8        display: -webkit-flex;
 9        display: -moz-flex;
10        display: flex;
11        float: none;
12    }
13}

visibility: visible

在你看来，把一个设置为​​visibility: visible​​​的元素放在一个设置为​​visibility: hidden​​的元素里面，会发生什么？

1.hidden {
2  visibility: hidden;
3}
4.hidden .visible {
5  visibility: visible;
6}

你可能会认为两个元素都不显示——然而事实上整个父元素都被隐藏了，而子元素不会。请看DEMO（​​https://codepen.io/CSSKing/pen/lxBfk​​）。

position: sticky

我们发现了一个新的特性，你可以新建一个​​sticky​​​属性的元素。它的运行效果和​​fixed​​相同，但不会挡住任何元素。你最好看看例子 只有Mozilla和Safari浏览器支持这一属性，但你也可以像下面那样使用它：

1.sticky {
2  position: static;
3  position: sticky;
4  top: 0px;
5}

我们将会在支持的浏览器中得到一个​​sticky​​属性的元素，而在不支持的浏览器中它将会是一个普通的元素。这在你需要建立一个不可替代的，可以移动的元素的移动端页面的时候非常实用。

新的尺寸单位

不久之前，一些新的用以描述不同元素大小的尺寸单位问世了，它们是：

• vw (viewport width) - 浏览器窗口宽度的1%。
• vh (viewport height) - 同上，只不过用来描述高度。
• vmin and vmax 设置介于vh和vw之间的最大最小值。

有趣的是，几乎所有的现代浏览器都能很好地支持它们，所以你可以放心地使用。 为什么我们需要这些新的单位？因为它们可以让不同的尺寸更容易被定义，你不要为父元素指定任何的百分比或者别的什么，请看例子：

1.some-text {
2    font-size: 100vh;
3    line-height: 100vh;
4}

或者你可以设置一个漂亮的弹出框在屏幕中间：

1.blackSquare {
2    background: black;
3    position: fixed;
4    height: 50vh;
5    width: 50vw;
6    left: 25vw;
7    top: 25vh;
8}

这看起来酷毙了，看看在codepen的例子（​​https://codepen.io/CrocoDillon/pen/fBJxu​​）

 但是目前仍然有一些关于这些新单位的不足之处：

• IE9应该用vm而不是vmin。
• iOS7在使用vh的时候可能会有bug。
• vmax至今并未得到全面的支持。

文字修饰

我们可以通过几行代码修改文字被选中时的效果：

1*::selection {
2    color: #fff;
3    background: #000;
4}
5*::-moz-selection {    
6    /*Only Firefox still needs a prefix*/
7    color: #fff;
8    background: #000;
9}

你不仅可以定义文字被选中时的颜色，还能定义阴影或者背景颜色。

触摸屏当中的元素滚动

如果你需要在触摸屏当中为一些元素设置内滚动，那么你不仅需要​​overflow: scroll / auto​​​，还需要​​-webkit-overflow-scrolling: touch;​​​实际上，移动端浏览器在某些时候并不能正确执行​​overflow: scroll / auto​​​，它可能会滚动整个页面而不是你想要的那部分。​​-webkit-overflow-scrolling​​解决了这个问题，你可以在你的实际项目中体验一下。

使用硬件加速

有时候动画可能会导致用户的电脑卡顿，你可以在特定元素中使用硬件加速来避免这个问题：

1.block {
2    transform: translateZ(0);
3}

你并不会察觉有什么不同，但浏览器会为这个元素进行3D硬件加速，在​​will-change​​这个特殊属性未被全面支持之前，这个方法还是很有用的。

Unicode Classes

你可以用Unicode符号明名class：

1.❤ {
 2    ...
 3}
 4.☢ {
 5    ...
 6}
 7.☭ {
 8    ...
 9}
10.★ {
11    ...
12}
13.☯ {
14    ...
15}

但这其实是用来搞笑的，千万不要在大型项目中使用，因为不是所有的电脑都支持Unicode符号。

垂直方向的百分比边距

实际上垂直方向的排列计算是基于父元素的宽度而不是高度。定义两个元素：

1<!-- html -->
2
3<div class="parent">  
4    <div class="child"></div>
5</div>

1<!-- css -->
 2
 3.parent {
 4    height: 400px;
 5    width: 200px;
 6}
 7.child {
 8    height: 50%;
 9    padding-top: 25%;
10    padding-bottom: 25%;
11    width: 100%;
12}

理论上，子元素的高会是父元素高的一半，但是看看我们实际得到的情况：

记住，子元素的百分比是相对于父元素的宽度。

火狐浏览器的按钮边距

Firefox用它自己的方式去计算按钮的边距。这听起来有点奇怪，但它会自动地添加一些边距进去：

可以用以下方法来修复这个问题：

1button::-moz-focus-inner,  
2input[type="reset"]::-moz-focus-inner,  
3input[type="button"]::-moz-focus-inner,  
4input[type="submit"]::-moz-focus-inner {  
5    border: none;
6    padding:0;
7}

Color + Border = ​​Border-Color​​

很少人知道，定义了一个元素的文字颜色，意味着这个元素的边框颜色也被定义了：

1input[type="text"] {  
2    color: red;
3    border: 1px solid;
4}

古老浏览器的彩蛋

如果你仍需要适配IE7或者类似的古老浏览器，你可以在定义hack的时候使用笑脸符号，像这样：

1body {  
2    :) background: pink;
3}

是不是很有趣？

以上就是你所必备的22个CSS小技巧，感谢阅读。

​