大家好！今天我们要 讨论 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 的确支持过渡了！它不会在每一步去改变值，因此你会认为，它不会产生过渡。但是，它真的支持！这里有个 不错的例子 。
我们可以用它检测当前颜色值，这样我们就不必多次定义它。
当和 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; ...}你还记得有时候你需要为图片设置 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;}示例 。
我们不使用任何图片，来给某个复选按钮设置样式：
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 清单，试着 鼓捣下代码 吧。
不是每个人都知道 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 将只显示偶数。
你还可以累加被用户选中的复选按钮：
Total selected:
.languages { counter-reset: characters;}input:checked { counter-increment: characters;}.total:after { content: counter(characters);}我们累加 input:checked 的值，并显示出来， 参看例子 。
你还能开发出一个小型计算器呢：
Sum
.numbers { counter-reset: sum;}#one:checked { counter-increment: sum 1; }#two:checked { counter-increment: sum 2; }#three:checked { counter-increment: sum 3; }#four:checked { counter-increment: sum 4; }#five:checked { counter-increment: sum 5; }#one-hundred:checked { counter-increment: sum 100; }.sum::after { content: '= ' counter(sum);}运行原理一样。这里有在线 demo 和 文章 。
你还记得需要使用「三明治」图标的频率吗？
至少有 3 种方法来绘制：
.shadow-icon { position: relative; } .shadow-icon:after { content: ""; position: absolute; left: 0; top: -50px; height: 100%; width: 100%; box-shadow: 0 5px 0 #000, 0 15px 0 #fff, 0 25px 0 #000, 0 35px 0 #fff, 0 45px 0 #000; }.gradient-icon { 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%);}你可以只粘贴这个标准符号：? （Unicode: U+2630, HTML: ☰）。你可以调整其颜色或尺寸，因此它没有其它方法灵活。
看例子 。
你还可以使用带有伪元素的 SVG、图标字体或边框。
CSS 有一些称之为 supports 的新表达式。如你所见，它可以检测浏览器是否支持所需选项。不是所有浏览器都支持它，但是你可将其用作简单的检查。
@supports (display: flex) { div { display: flex; }}/*You can check prefixes*/@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { section { display: -webkit-flex; display: -moz-flex; display: flex; float: none; }}把 visibility: visible 的区块设置为 visibility: hidden，你对此有何看法？
.hidden { visibility: hidden;}.hidden .visible { visibility: visible;}你或许认为所有元素都将被隐藏，实际上，除了子元素显示之外，父元素将隐藏所有元素。请看 demo 。
我们已经发现了一个新特性，现在你可以创建 “sticky” 的区块了。它们和 fixed 区块表现一样，但是不会隐藏另一个区块。 你最好看下这里 。目前，只有 Mozilla 和 Safari 支持，但是你可以用如下方式实现：
.sticky { position: static; position: sticky; top: 0px;}我们将会在支持的浏览器里得到一个 sticky 区块，而在其它浏览器里得到一个普通区块。特别有利于移动网站，因为你需要创建一个可移动区块且不影响其它元素。
最近，世界上找到了一种新方式，用来描述不同物体的尺寸。比如：
有意思的是，大部分现代浏览器都对它们支持很好，你可以随意使用。我们为什么需要它们呢？因为它们让所有的尺寸更简单了。你不必定义父级元素尺寸的百分比或其它东东。看个例子：
.some-text { font-size: 100vh; line-height: 100vh;}或者，你在屏幕中央放置一个美丽的弹窗：
.blackSquare { background: black; position: fixed; height: 50vh; width: 50vw; left: 25vw; top: 25vh;}这貌似是很酷的解决方案。请参考来自 Codepen 的 例子 。
在使用这个特性时，存在一些劣势：
我们用数行代码就能改变选中文本的颜色：
*::selection { color: #fff; background: #000;}*::-moz-selection { /*Only Firefox still needs a prefix*/ color: #fff; background: #000;}除了定义选中文本的颜色，还能定义阴影和背景。
如果页面存在一些内部滚动的区块，那么除了添加 overflow: scroll / auto，还要添加这行代码：
-webkit-overflow-scrolling: touch;
问题在于，移动设备浏览器对于 overflow: scroll 属性支持不够好，会滚动整个页面而不是期望的区块。-webkit-overflow-scrolling 修复了这个问题。你可以将其添加到你自己的项目中，看看效果。
有时候你的动画能够减慢用户电脑。为了阻止这种情况，你可以针对特定区块使用加速：
.block { transform: translatez(0);}你可能感受不到变化，但是浏览器理解，这个元素应该被看做三维，然后开启加速。如果针对 will-change 属性的具体设计，没有提供正常支持，这种方法就不太建议了。
你可以在如下代码看到使用 Unicode 字符做类名：
.? { ...}.? { ...}.? { ...}.★ { ...}.? { ...}只是开个玩笑。尽量不要在大项目中使用，因为不是每一台电脑都一定支持 UTF-8。
事实上，垂直缩进是根据父元素的宽度、而非高度计算出来的。我们创建两个区块：
.parent { height: 400px; width: 200px;}.child { height: 50%; padding-top: 25%; padding-bottom: 25%; width: 100%;}理论上，应该根据高度来填充父元素的，不过，我们看看结果：
你应该记住，百分比是根据父元素的宽度计算出来的。
Firefox 还没有自身方法来计算 button 的边距。貌似奇怪，但是你可以手动添加。
还可以这样修复：
button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner { border: none; padding:0;}不是每个人都明白，除了为任何对象定义文本颜色，还可以定义其边框颜色：
input[type="text"] { color: red; border: 1px solid;}如果你仍然不得不支持 IE7 等类似情况，那么，你可以用一个笑脸来定义其 hack：
很酷，对吧？
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright © 2019-2024 51dongshi.com 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
