你很熟悉CSS，却没掌握这些CSS技巧

Posted 2020-06-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了你很熟悉CSS，却没掌握这些CSS技巧相关的知识，希望对你有一定的参考价值。

转载来自 http://www.html5cn.org/article-9294-1.html

做前端开发的人都很熟悉CSS，一个漂亮的网页由HTML标签和控制这些标签布局的CSS组成，因此CSS在开发中起到功不可没的作用，在我们频繁使用CSS过程中掌握一些技巧是必须的，本文分享了22个方便且很重要的CSS技巧，值得收藏！

　　混合模式

　　目前，Firefox 和 Safari 开始支持混合模式，就像 Photoshop 一样。Chrome 和 Opera 也支持，只是有些差异。

　　你可以创建不同的样式。下面是示例代码：

1
.blend {

2
    background: #fff;

3
}

4
.blend img {

5
    mix-blend-mode: darken; 

6
}

　　在线尝试一下 CSS 混合模式和滤镜，效果很有趣！

　　渐变边框

　　如今，你可以在边框里使用渐变了。非常简单，只要用较小的 z-index 设置伪元素就可以了：

01
.box {

02
  margin: 80px 30px;

03
  width: 200px;

04
  height: 200px;

05
  position: relative;

06
  background: #fff;

07
  float: left;

08
}

09
.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
}

　　你可以在这里找到所有例子。使用 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 的确支持过渡了!它不会在每一步去改变值，因此你会认为，它不会产生过渡。但是，它真的支持!这里有个不错的例子。

　　currentColor

　　我们可以用它检测当前颜色值，这样我们就不必多次定义它。

　　当和 SVG icon 一起使用时最有帮助，它随着父级元素颜色的改变而改变。通常，我们的做法如下：

01
.button {

02
  color: black;

03
}

04
.button:hover {

05
  color: red;

06
}

07
.button:active {

08
  color: green;

09
}

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 实现：

01
svg {  

02
  fill: currentColor;

03
}

04
  
05
.button {

06
  color: black;

07
  border: 1px solid currentColor;

08
}

09
.button:hover {

10
  color: red;

11
}

12
.button:active {

13
  color: green;

14
}

　　关于伪元素的代码：

01
a {  

02
  color: #000;

03
}

04
a:hover {  

05
  color: #333;

06
}

07
a:active {  

08
  color: #666;

09
}

10
  
11
a:after,  

12
a:hover:after,  

13
a:active:after {  

14
  background: currentColor;

15
  ...

16
}

　　object-fit

　　你还记得有时候你需要为图片设置 background-size 吗，因为它会解决很多问题。现在你可以使用 object-fit，webkit 支持它，很快也会被 Firefox 支持。

01
.image__contain {

02
  object-fit: contain; 

03
} 

04
.image__fill {

05
  object-fit: fill; 

06
}

07
.image__cover {

08
  object-fit: cover; 

09
}

10
.image__scale-down {

11
  object-fit: scale-down;

12
}

　　示例。

　　单选、复选按钮的样式

　　我们不使用任何图片，来给某个复选按钮设置样式：

1
<font size="3"><input id="check" name="check" type="checkbox">

2
<label for="check">Checkbox</label></font>

01
input[type=checkbox] {display: none;}

02
  
03
input[type=checkbox] + label:before {  

04
    content: "";

05
    border: 1px solid #000;

06
    font-size: 11px;    

07
    line-height: 10px;

08
    margin: 0 5px 0 0;

09
    height: 10px;

10
    width: 10px;

11
    text-align: center;

12
    vertical-align: middle;

13
}

14
  
15
input[type=checkbox]:checked + label:before {  

16
    content: "\2713";

17
}

　　你可以看到，伪元素和伪选择器 :checked(IE9+)表现正常。在上面的示例代码中，我们隐藏了原始的复选按钮，用我们自己的代替。当被勾选时，我们通过 content 显示一个 Unicode 字符。

　　CSS 和 HTML 用到的 Unicode 字符不同。在 CSS 中，开头是反斜杠，然后跟上十六进制的字符，而在 HTML 中，它是十进制的，形如 ? 。

　　我们还可以给复选按钮加上动画：

1
input[type=checkbox] + label:before {  

2
    content: "\2713";

3
    color: transparent;

4
    transition: color ease .3s;

5
}

6
input[type=checkbox]:checked + label:before {  

7
    color: #000;

8
}

　　下面是单选按钮的动画：

01
<font size="3">input[type=radio] + label:before {  

02
    content: "\26AB";

03
    border: 1px solid #000;

04
    border-radius: 50%;

05
    font-size: 0;    

06
    transition: font-size ease .3s;

07
}

08
input[type=radio]:checked + label:before {  

09
    font-size: 10px;    

10
}</font>

　　你可以在这里找到完整的 Unicode 清单，试着鼓捣下代码吧。

　　CSS 中的counter

　　不是每个人都知道 counter 可以在 CSS 中设置：

1
<ol class="list">  

2
    <li>a

3
    </li><li>b

4
    </li><li>c

5
</li></ol>

1
.list {

2
    counter-reset: i; //reset conunter

3
}

4
.list > li {

5
    counter-increment: i; //counter ID

6
}

7
.list li:after {

8
    content: "[" counter(i) "]"; //print the result

9
}

　　我们在 counter-reset 属性中定义了一个任意 ID 和初始值(默认为 0)。你可以在 counter-increment 中设置另一个数字，它定义了计数器的步长。

　　比如，counter-increment: i 2 将只显示偶数。

　　CSS 高级计数器

　　你还可以累加被用户选中的复选按钮：

01
<div class="languages">  

02
  <input id="c" type="checkbox"><label for="c">C</label>

03
  <input id="C++" type="checkbox"><label for="C++">C++</label>

04
  <input id="C#" type="checkbox"><label for="C#">C#</label>

05
  <input id="Java" type="checkbox"><label for="Java">Java</label>

06
  <input id="javascript" type="checkbox"><label for="JavaScript">JavaScript</label>

07
  <input id="php" type="checkbox"><label for="PHP">PHP</label>

08
  <input id="Python" type="checkbox"><label for="Python">Python</label>

09
  <input id="Ruby" type="checkbox"><label for="Ruby">Ruby</label>

10
</div>  

11
<p class="total">  

12
  Total selected:

13
</p>

1
.languages {

2
  counter-reset: characters;

3
}

4
input:checked {  

5
  counter-increment: characters;

6
}

7
.total:after {

8
  content: counter(characters);

9
}

　　我们累加 input:checked 的值，并显示出来，参看例子。

　　你还能开发出一个小型计算器呢：

01
<div class="numbers">  

02
  <input id="one" type="checkbox"><label for="one">1</label>

03
  <input id="two" type="checkbox"><label for="two">2</label>

04
  <input id="three" type="checkbox"><label for="three">3</label>

05
  <input id="four" type="checkbox"><label for="four">4</label>

06
  <input id="five" type="checkbox"><label for="five">5</label>

07
  <input id="one-hundred" type="checkbox"><label for="one-hundred">100</label>

08
</div>  

09
<p class="sum">  

10
  Sum 

11
</p>

01
.numbers {

02
  counter-reset: sum;

03
}

04
  
05
#one:checked { counter-increment: sum 1; }

06
#two:checked { counter-increment: sum 2; }

07
#three:checked { counter-increment: sum 3; }

08
#four:checked { counter-increment: sum 4; }

09
#five:checked { counter-increment: sum 5; }

10
#one-hundred:checked { counter-increment: sum 100; }

11
  
12
.sum::after {

13
  content: ‘= ‘ counter(sum);

14
}

　　运行原理一样。这里有在线 demo 和文章。

　　没有图片的菜单图标

　　你还记得需要使用「三明治」图标的频率吗?

　　至少有 3 种方法来绘制：

　　1.shadow

01
.shadow-icon {

02
  position: relative;

03
  }

04
  .shadow-icon:after {

05
    content: "";

06
    position: absolute;

07
    left: 0;

08
    top: -50px;

09
    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.渐变

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、图标字体或边框。

　　 @Supports

　　CSS 有一些称之为 supports 的新表达式。如你所见，它可以检测浏览器是否支持所需选项。不是所有浏览器都支持它，但是你可将其用作简单的检查。

01
@supports (display: flex) {

02
    div { display: flex; }

03
}

04
  
05
/*You can check prefixes*/

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

07
    section {

08
        display: -webkit-flex;

09
        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
}

　　你或许认为所有元素都将被隐藏，实际上，除了子元素显示之外，父元素将隐藏所有元素。请看 CSS混合风格按钮无延迟翻转图形技巧

CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪效果

作为一枚web前端开发工程师这些CSS 小技巧你值得掌握

CSS 高级技巧汇总

CSS面试须知，哪些需要掌握得CSS技巧

CSS3混合模式