转载来自 http://www.html5cn.org/article-9294-1.htmlcss
作前端开发的人都很熟悉CSS,一个漂亮的网页由HTML标签和控制这些标签布局的CSS组成,所以CSS在开发中起到功不可没的做用,在咱们频繁使用CSS过程当中掌握一些技巧是必须的,本文分享了22个方便且很重要的CSS技巧,值得收藏!html
混合模式前端
目前,Firefox 和 Safari 开始支持混合模式,就像 Photoshop 同样。Chrome 和 Opera 也支持,只是有些差别。html5
你能够建立不一样的样式。下面是示例代码:git
1 |
.blend { |
2 |
background: #fff; |
3 |
} |
4 |
.blend img { |
5 |
mix-blend-mode: darken; |
6 |
} |
在线尝试一下 CSS 混合模式和滤镜,效果颇有趣!github
渐变边框web
现在,你能够在边框里使用渐变了。很是简单,只要用较小的 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 属性也会被全部浏览器支持,实现方法以下:svg
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 |
} |
没有图片的菜单图标
你还记得须要使用「三明治」图标的频率吗?
至少有 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 区块,而在其它浏览器里获得一个普通区块。特别有利于移动网站,由于你须要建立一个可移动区块且不影响其它元素。
新尺寸
最近,世界上找到了一种新方式,用来描述不一样物体的尺寸。好比:
有意思的是,大部分现代浏览器都对它们支持很好,你能够随意使用。咱们为何须要它们呢?由于它们让全部的尺寸更简单了。你没必要定义父级元素尺寸的百分比或其它东东。看个例子:
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 的例子。
在使用这个特性时,存在一些劣势:
文本修饰
咱们用数行代码就能改变选中文本的颜色:
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:
很酷,对吧?