大家好！今天我们要 讨论 CSS 中的一些有用的技巧 。开始吧……
混合模式
目前，Firefox 和 Safari 开始支持混合模式，就像 Photoshop 一样。Chrome 和 Opera 也支持，只是有些差异。看例子：
你可以创建不同的样式。下面是示例代码：
.blend { background: #fff;}.blend img { mix-blend-mode: darken; } 在线尝试一下 CSS 混合模式和滤镜 ！
渐变边框
如今，你可以在边框里使用渐变了。非常简单，只要用较小的 z-index 设置伪元素就可以了：
.box { margin: 80px 30px; width: 200px; height: 200px; position: relative; background: #fff; float: left;}.box:before { content: ''; z-index: -1; position: absolute; width: 220px; height: 220px; top: -10px; left: -10px; background-image: linear-gradient(90deg, yellow, gold);} 你可以在 这里 找到所有例子。使用 background-clip 和 background-origin 也可以做到 。在美好未来的某一天，border-image 属性也会被所有浏览器支持，实现方法如下：
.box { border-image: linear-gradient(to bottom, #000000 0%, #FFFFFF 100%); border-image-slice: 1; /* set internal offset */} z-index 支持过渡
你可能不知道，但是 z-index 的确支持过渡了！它不会在每一步去改变值，因此你会认为，它不会产生过渡。但是，它真的支持！这里有个 不错的例子 。
currentColor
我们可以用它检测当前颜色值，这样我们就不必多次定义它。
当和 SVG icon 一起使用时最有帮助，它随着父级元素颜色的改变而改变。通常，我们的做法如下：
.button { color: black;}.button:hover { color: red;}.button:active { color: green;}.button svg { fill: black;}.button:hover svg { fill: red;}.button:active svg { fill: green;} 不过，我们可以用 currentColor 实现：
svg { fill: currentColor;}.button { color: black; border: 1px solid currentColor;}.button:hover { color: red;}.button:active { color: green;} 关于伪元素的代码：
a { color: #000;}a:hover { color: #333;}a:active { color: #666;}a:after, a:hover:after, a:active:after { background: currentColor; ...} object-fit
你还记得有时候你需要为图片设置 background-size 吗，因为它会解决很多问题。现在你可以使用 object-fit，webkit 支持它，很快也会被 Firefox 支持。
.image__contain { object-fit: contain; } .image__fill { object-fit: fill; }.image__cover { object-fit: cover; }.image__scale-down { object-fit: scale-down;}
示例 。
单选、复选按钮的样式
我们不使用任何图片，来给某个复选按钮设置样式：
Checkbox
input[type=checkbox] {display: none;}input[type=checkbox] + label:before { content: ""; border: 1px solid #000; font-size: 11px; line-height: 10px; margin: 0 5px 0 0; height: 10px; width: 10px; text-align: center; vertical-align: middle;}input[type=checkbox]:checked + label:before { content: "\2713";}
你可以看到，伪元素和伪选择器 :checked（IE9+）表现正常。在上面的示例代码中，我们隐藏了原始的复选按钮，用我们自己的代替。当被勾选时，我们通过 content 显示一个 Unicode 字符。
CSS 和 HTML 用到的 Unicode 字符不同。在 CSS 中，开头是反斜杠，然后跟上十六进制的字符，而在 HTML 中，它是十进制的，形如 ✓ 。
我们还可以给复选按钮加上动画：
input[type=checkbox] + label:before { content: "\2713"; color: transparent; transition: color ease .3s;}input[type=checkbox]:checked + label:before { color: #000;} 下面是单选按钮的动画：
input[type=radio] + label:before { content: "\26AB"; border: 1px solid #000; border-radius: 50%; font-size: 0; transition: font-size ease .3s;}input[type=radio]:checked + label:before { font-size: 10px; }
你可以在 这里 找到完整的 Unicode 清单，试着 鼓捣下代码 吧。
CSS 中的 counter
不是每个人都知道 counter 可以在 CSS 中设置：
a b c
.list { counter-reset: i; //reset conunter}.list > li { counter-increment: i; //counter ID}.list li:after { content: "[" counter(i) "]"; //print the result} 我们在 counter-reset 属性中定义了一个任意 ID 和初始值（默认为 0）。你可以在 counter-increment 中设置另一个数字，它定义了计数器的步长。
比如，counter-increment: i 2 将只显示偶数。
CSS 高级计数器
你还可以累加被用户选中的复选按钮：
C C++ C# Java JavaScript PHP Python Ruby
查看更多关于CSS的22个必备技巧_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did114082