转载来自 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 }

　　你或许认为所有元素都将被隐藏，实际上，除了子元素显示之外，父元素将隐藏所有元素。请看 demo。

　　position: sticky

　　我们已经发现了一个新特性，现在你可以创建 “sticky” 的区块了。它们和 fixed 区块表现一样，但是不会隐藏另一个区块。你最好看下这里。目前，只有 Mozilla 和 Safari 支持，但是你可以用如下方式实现：

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

　　我们将会在支持的浏览器里得到一个 sticky 区块，而在其它浏览器里得到一个普通区块。特别有利于移动网站，因为你需要创建一个可移动区块且不影响其它元素。

　　新尺寸

　　最近，世界上找到了一种新方式，用来描述不同物体的尺寸。比如：

  • 　　vw(视口宽度)：视口宽度，单位：1/100。
  • 　　vh(视口高度)：视口高度，单位：1/100。
  • 　　vmin 和 vmax：二者都是相对于视口的宽度或高度，但前者总是相对于大的那个，后者总是相对于小的那个。

　　有意思的是，大部分现代浏览器都对它们支持很好，你可以随意使用。我们为什么需要它们呢?因为它们让所有的尺寸更简单了。你不必定义父级元素尺寸的百分比或其它东东。看个例子：

1 <font size="3">.some-text {
2     font-size: 100vh;
3     line-height: 100vh;
4 }</font>

　　或者，你在屏幕中央放置一个美丽的弹窗：

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

　　这貌似是很酷的解决方案。请参考来自 Codepen 的例子。

　　在使用这个特性时，存在一些劣势：

  • 　　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，还要添加这行代码：

1 -webkit-overflow-scrolling: touch;

　　问题在于，移动设备浏览器对于 overflow: scroll 属性支持不够好，会滚动整个页面而不是期望的区块。-webkit-overflow-scrolling 修复了这个问题。你可以将其添加到你自己的项目中，看看效果。

　　使用硬件加速

　　有时候你的动画能够减慢用户电脑。为了阻止这种情况，你可以针对特定区块使用加速：

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

　　你可能感受不到变化，但是浏览器理解，这个元素应该被看做三维，然后开启加速。如果针对 will-change 属性的具体设计，没有提供正常支持，这种方法就不太建议了。

　　类命名用 Unicode 字符

　　你可以在如下代码看到使用 Unicode 字符做类名：

01 .❤ {
02     ...
03 }
04 .☢ {
05     ...
06 }
07 .☭ {
08     ...
09 }
10 .★ {
11     ...
12 }
13 .☯ {
14     ...
15 }

　　只是开个玩笑。尽量不要在大项目中使用，因为不是每一台电脑都一定支持 UTF-8。

　　百分比表示的垂直边距

　　事实上，垂直缩进是根据父元素的宽度、而非高度计算出来的。我们创建两个区块：

1 <div class="parent"> 
2     <div class="child"></div>
3 </div>
01 .parent {
02     height: 400px;
03     width: 200px;
04 }
05 .child {
06     height: 50%;
07     padding-top: 25%;
08     padding-bottom: 25%;
09     width: 100%;
10 }

　　理论上，应该根据高度来填充父元素的，不过，我们看看结果：

　　你应该记住，百分比是根据父元素的宽度计算出来的。

　　Firefox 下的 button 边距

　　Firefox 还没有自身方法来计算 button 的边距。貌似奇怪，但是你可以手动添加。

　　还可以这样修复：

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

　　Color + Border = Border-Color

　　不是每个人都明白，除了为任何对象定义文本颜色，还可以定义其边框颜色：

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

　　流金岁月

　　如果你仍然不得不支持 IE7 等类似情况，那么，你可以用一个笑脸来定义其 hack：

　　很酷，对吧?

你很熟悉CSS，却没掌握这些CSS技巧的更多相关文章

  1. 没学过CSS等前端的我，也想美化一下自己的博客

    随便说几句: 自己一直学的都是 C++和 Java 以及 Python语言,根本不懂高大上的 CSS 和 著名的 HTML5.感觉那些能自己设计那么漂亮的博客的朋友都好厉害.可以自己加上博客公告栏的小 ...

  2. IE浏览器没有加载CSS或js文件的秘密及解决办法

    其实是两处资料拼成这一篇博文的,因为在开发过程中遇到,有的文章只是说明原因,而没有给出解决方案,所以再次给出解释和解决方法,以供参考,如果有好的解决方法,也请分享下! ---------------- ...

  3. 【CSS】381- 提升你的CSS选择器技巧

    我已经使用CSS多年了,但直到最近我才深入研究了一下CSS选择器. 我为什么要这样做呢?我们都知道选择器,但麻烦的是随着时间的推移,很容易习惯于在每个项目中使用相同的可信任选择器来实现你需要做的事情. ...

  4. 奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画？

    本文将从比较多的方面详细阐述如何利用 CSS 3D 的特性,实现各类有趣.酷炫的动画效果.认真读完,你将会收获到: 了解 CSS 3D 的各种用途 激发你新的灵感,感受动画之美 对于提升 CSS 动画 ...

  5. 【CSS】最全的CSS浏览器兼容问题

    CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml ...

  6. 20190422-外部导入CSS样式之link、CSS@import、Sass分音

    写在前面乱七八糟的前言:今天wuliMR黄问了一个问题,Sass的分音与link标签都是导入外部样式的,有什么不同,这真是个好问题,因为本白着实没想过,也不知道,不过没关系,成功的背后总有一个默默无闻 ...

  7. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  8. Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  9. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

随机推荐

  1. vue - webpack.dev.conf.js for HtmlWebpackPlugin

    描述: 这是一个webpack插件,可以简化HTML文件的创建,为您的webpack捆绑服务提供服务. 这对于webpack包含文件名中包含哈希值的bundle 来说尤其有用,它会更改每个编译. 您可 ...

  2. 算法笔记_091:蓝桥杯练习 递推求值（Java）

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 已知递推公式: F(n, 1)=F(n-1, 2) + 2F(n-3, 1) + 5, F(n, 2)=F(n-1, 1) + 3F(n- ...

  3. java阅读笔记

    前言:面向对象设计的几大原则? 1>针对接口编程,而不是针对实现编程 2>优先使用对象组合,而不是类继承 1.只根据抽象类中定义的接口来操纵对象有以下两个好处? 1)客户无须知道他们使用对 ...

  4. hdu 3572 Task Schedule（最大流&amp;&amp;建图经典&amp;&amp;dinic）

    Task Schedule Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  5. LaTeX 在编译时出现 File ended while scanning use of \@writefile错误

    LaTeX -在修改论文过程中,重新编译时.出现了File ended while scanning use of \@writefile错误,如以下所示: 问题出现的原因: 因为aux文件没有完整输 ...

  6. min-height clear

    在编辑页面时,总是会遇到min-height的设置 但是设置min-height后下面的div总是 跟随min-height的高度有些漂浮,如果不想让下面的div没有漂浮的效果 可以用到样式 clea ...

  7. SQL面试题： 数据库中有A B C三列,用SQL语句实现：当A列大于B列时选择A列否则选择B列 ，当B列大于C列时选择B列否则选择C列 ，

    1.用一条sql语句 select (case when a>b then a else b end ),(case when b>c then b esle c end)  from 表 ...

  8. python --存储对象

    转自:http://www.cnblogs.com/vamei/archive/2012/09/15/2684781.html 在之前对Python对象的介绍中 (面向对象的基本概念,面向对象的进一步 ...

  9. 兼容placeholder

    众所周知.IE9以下不兼容placeholder属性,因此自己定义了一个jQuery插件placeHolder.js.以下为placeHolder.js的代码: /** * 该控件兼容IE9下面,专门 ...

  10. 点滴积累【C#】---序列化和反序列化

    序列化和反序列化效果图: 序列化和反序列化代码: 需要添加两个命名空间: using System.IO; using System.Runtime.Serialization.Formatters. ...