大家好，今天我们将会介绍一些非常实用的CSS小技巧，让我们开始吧！
混合模式
之前Firefox和Safari浏览器已经开始支持类似Photoshop的混合模式，但是在Chrome和Opera浏览器中需要添加前缀。举个栗子：
1// 你也可以尝试不同的样式
2
3.blend {
4background: #fff;
5}
6.blend img {
7mix-blend-mode: darken;
8}
体验地址：http://ilyashubin.github.io/FilterBlend/
渐变边框
现在，你甚至可以在边框中使用渐变。 要使用渐变边框非常简单，只需要设置一个更低z-index的伪元素即可：
1.box {
2margin:80px30px;
3width:200px;
4height:200px;
5position: relative;
6background: #fff;
7float: left;
8}
9.box:before {
10content:'';
11z-index:-1;
12position: absolute;
13width:220px;
14height:220px;
15top:-10px;
16left:-10px;
17background-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 {
2border-image: linear-gradient(to bottom, #0000000%, #FFFFFF100%);
3border-image-slice:1;/* set internal offset */
4}
z-index的过渡
也许你不知道z-index同样支持过渡！在过渡的每一步中，它的值都不发生改变，所以你以为它不支持过渡——但其实它支持。
举个栗子→（http://zomigi.com/demo/z-index_transition.html）
currentColor
我们可以使用这个方法来侦测当前的颜色，以避免经常地重复定义它。
顺便给大家推荐一个裙，它的前面是 537，中间是631，最后就是 707。想要学习前端的小伙伴可以加入我们一起学习，互相帮助。群里每天晚上都有大神免费直播上课，如果不是想学习的小伙伴就不要加啦。
这个方法在使用SVG图标的时候非常有用，因为它们的颜色由其父元素决定。通常我们是这么做的：
1.button {
2color: black;
3}
4.button:hover {
5color: red;
6}
7.button:active {
8color: green;
9}
10
11.button svg {
12fill: black;
13}
14.button:hover svg {
15fill: red;
16}
17.button:active svg {
18fill: green;
19}
但我们可以使用currentColor这么做：
1svg {
2fill: currentColor;
3}
4
5.button {
6color: black;
7border:1px solid currentColor;
8}
9.button:hover {
10color: red;
11}
12.button:active {
13color: green;
14}
附上其它带有伪元素的例子：
1a {
2color: #000;
3}
4a:hover {
5color: #333;
6}
7a:active {
8color: #666;
9}
10
11a:after,
12a:hover:after,
13a:active:after {
14background: currentColor;
15...
16}
Object Fit
你是否还记得为了解决一些问题而给一幅背景图设置background-size属性的时刻呢？
现在你可以使用object-fit属性啦，webkit浏览器都支持它，Firefox也将在近期予以支持。
1.image__contain {
2object-fit: contain;
3}
4.image__fill {
5object-fit: fill;
6}
7.image__cover {
8object-fit: cover;
9}
10.image__scale-down {
11object-fit: scale-down;
12}
举个栗子→（https://codepen.io/CSSKing/pen/XJEZeG）
单选框和复选框的样式
让我们一起不使用图片来设置复选框的样式：
1
2
3Checkbox
1
2input[type=checkbox] {display: none;}
3
4input[type=checkbox] + label:before {
5content:"";
6border:1px solid #000;
7font-size:11px;
8line-height:10px;
9margin:05px00;
10height:10px;
11width:10px;
12text-align: center;
13vertical-align: middle;
14}
15
16input[type=checkbox]:checked + label:before {
17content:"\2713";
18}
正如你所看见的，我们隐藏了原有的复选框，改为使用伪元素和伪类:checked（IE9+）来表现它。
当它被选中时，一个设置在content里的Unicode编码的字符将会显示出来。
值得注意的是，Unicode编码在CSS和HTML中的写法是不一样的。在CSS中它是一个以反斜杠为开始的十六进制数，而在HTML中它是十进制的，比如✓。 接着为我们的复选框添加一些动画效果：
1
2input[type=checkbox] + label:before {
3content:"\2713";
4color: transparent;
5transition: color ease.3s;
6}
7input[type=checkbox]:checked + label:before {
8color: #000;
9}
10
11
12input[type=radio] + label:before {
13content:"\26AB";
14border:1px solid #000;
15border-radius:50%;
16font-size:0;
17transition: font-size ease.3s;
18}
19input[type=radio]:checked + label:before {
20font-size:10px;
21}
这里（https://unicode-table.com/en/）是所有的Unicode编码，以及可以在这里（https://codepen.io/anon/pen/CdzwB）进行体验。
CSS中的计数器
总所周知CSS中是可以使用计数器的：
1
2
3
4
5
6
1
2.list {
3counter-reset: i;//reset conunter
4}
5.list > li {
6counter-increment: i;//counter ID
7}
8.list li:after {
9content:"["counter(i)"]";//print the result
10}
我们定义了一个ID在counter-reset属性中作为初始值（默认为0）。你可以设置另一个值在counter-increment属性中作为每一步的递增值。
顺便给大家推荐一个裙，它的前面是 537，中间是631，最后就是 707。想要学习前端的小伙伴可以加入我们一起学习，互相帮助。群里每天晚上都有大神免费直播上课，如果不是想学习的小伙伴就不要加啦。
高级CSS计数器
你可以计算出有多少个复选框被用户勾选了：
1
2
3C
4C++
5C#
6Java
7JavaScript
8PHP
9Python
10Ruby
11
12
13Total selected:
14
1
2.languages {
3counter-reset: characters;
4}
5input:checked {
6counter-increment: characters;
7}
8.total:after {
9content: counter(characters);
10}
你也可以制作一个简单的计算器：
1
2
31
42
53
64
75
8100
9
10
11Sum
12
1
2.numbers {
3counter-reset: sum;
4}
5
6#one:checked { counter-increment: sum1; }
7#two:checked { counter-increment: sum2; }
8#three:checked { counter-increment: sum3; }
9#four:checked { counter-increment: sum4; }
10#five:checked { counter-increment: sum5; }
11#one-hundred:checked { counter-increment: sum100; }
12
13.sum::after {
14content:'= '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 {
2position: relative;
3}
4.shadow-icon:after {
5content:"";
6position: absolute;
7left:0;
8top:-50px;
9height:100%;
10width:100%;
11box-shadow:05px0#000,015px0#fff,025px0#000,035px0#fff,045px0#000;
12}
2、 Gradient
1.gradient-icon {
2background: linear-gradient(to bottom, #0000%, #00020%, transparent20%, transparent40%, #00040%, #00060%, transparent60%, transparent80%, #00080%, #000100%);
3}
3、 UTF-8 你可以直接使用标准符号：☰ (Unicode: U+2630, HTML: ☰)。你也可以像其他元素那样灵活设置它的颜色或大小。
顺便给大家推荐一个裙，它的前面是 537，中间是631，最后就是 707。想要学习前端的小伙伴可以加入我们一起学习，互相帮助。群里每天晚上都有大神免费直播上课，如果不是想学习的小伙伴就不要加啦。
你也可以使用SVG，字体图标，或者通过伪元素设置的border边框。
@Supports
这是一个新的叫做supports的CSS表达式。顾名思义，它可以检测某些设定是否被浏览器所支持，并非所有的浏览器都支持它，但是你仍然可以使用它作为基本的检测手段：
1@supports (display: flex) {
2div {display: flex; }
3}
4
5/*You can check prefixes*/
6@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {
7section {
8display: -webkit-flex;
9display: -moz-flex;
10display: flex;
11float: none;
12}
13}
visibility: visible
在你看来，把一个设置为visibility: visible的元素放在一个设置为visibility: hidden的元素里面，会发生什么？
1.hidden {
2visibility: hidden;
3}
4.hidden .visible {
5visibility: visible;
6}
你可能会认为两个元素都不显示——然而事实上整个父元素都被隐藏了，而子元素不会。请看DEMO（https://codepen.io/CSSKing/pen/lxBfk）。
position: sticky
我们发现了一个新的特性，你可以新建一个sticky属性的元素。它的运行效果和fixed相同，但不会挡住任何元素。你最好看看例子 只有Mozilla和Safari浏览器支持这一属性，但你也可以像下面那样使用它：
1.sticky {
2position:static;
3position: sticky;
4top:0px;
5}
我们将会在支持的浏览器中得到一个sticky属性的元素，而在不支持的浏览器中它将会是一个普通的元素。这在你需要建立一个不可替代的，可以移动的元素的移动端页面的时候非常实用。
新的尺寸单位
不久之前，一些新的用以描述不同元素大小的尺寸单位问世了，它们是：
vw (viewport width) - 浏览器窗口宽度的1%。
vh (viewport height) - 同上，只不过用来描述高度。
vmin and vmax 设置介于vh和vw之间的最大最小值。
有趣的是，几乎所有的现代浏览器都能很好地支持它们，所以你可以放心地使用。 为什么我们需要这些新的单位？因为它们可以让不同的尺寸更容易被定义，你不要为父元素指定任何的百分比或者别的什么，请看例子：
1.some-text {
2font-size:100vh;
3line-height:100vh;
4}
或者你可以设置一个漂亮的弹出框在屏幕中间：
1.blackSquare {
2background: black;
3position: fixed;
4height:50vh;
5width:50vw;
6left:25vw;
7top:25vh;
8}
这看起来酷毙了，看看在codepen的例子（https://codepen.io/CrocoDillon/pen/fBJxu）
但是目前仍然有一些关于这些新单位的不足之处：
IE9应该用vm而不是vmin。
iOS7在使用vh的时候可能会有bug。
vmax至今并未得到全面的支持。
文字修饰
我们可以通过几行代码修改文字被选中时的效果：
1*::selection {
2color: #fff;
3background: #000;
4}
5*::-moz-selection {
6/*Only Firefox still needs a prefix*/
7color: #fff;
8background: #000;
9}
你不仅可以定义文字被选中时的颜色，还能定义阴影或者背景颜色。
顺便给大家推荐一个裙，它的前面是 537，中间是631，最后就是 707。想要学习前端的小伙伴可以加入我们一起学习，互相帮助。群里每天晚上都有大神免费直播上课，如果不是想学习的小伙伴就不要加啦。
触摸屏当中的元素滚动
如果你需要在触摸屏当中为一些元素设置内滚动，那么你不仅需要overflow: scroll / auto，还需要-webkit-overflow-scrolling: touch;实际上，移动端浏览器在某些时候并不能正确执行overflow: scroll / auto，它可能会滚动整个页面而不是你想要的那部分。-webkit-overflow-scrolling解决了这个问题，你可以在你的实际项目中体验一下。
使用硬件加速
有时候动画可能会导致用户的电脑卡顿，你可以在特定元素中使用硬件加速来避免这个问题：
1.block {
2transform: 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
2
3
4
5
1
2
3.parent {
4height:400px;
5width:200px;
6}
7.child {
8height:50%;
9padding-top:25%;
10padding-bottom:25%;
11width: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 {
5border: none;
6padding:0;
7}
Color + Border =Border-Color
很少人知道，定义了一个元素的文字颜色，意味着这个元素的边框颜色也被定义了：
1input[type="text"] {
2color: red;
3border:1px solid;
4}
古老浏览器的彩蛋
如果你仍需要适配IE7或者类似的古老浏览器，你可以在定义hack的时候使用笑脸符号，像这样：
1body {
2:) background: pink;
3}
是不是很有趣？
以上就是你所必备的22个CSS小技巧，感谢阅读。
网友评论