你很熟悉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
|
}
|
你或许认为所有元素都将被隐藏，实际上，除了子元素显示之外，父元素将隐藏所有元素。请看 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：
很酷，对吧?
转载于:https://www.cnblogs.com/ling-du/p/5159496.html
你很熟悉CSS，却没掌握这些CSS技巧相关推荐
- 引子 我想大家应该都很熟悉DNS了，这回在DNS前面加了一个D又变成了什么呢？这个D就是Dynamic(动态)，也就是说，按照传统，一个域名所对应的IP地址应该是定死的，而使用了DDNS后，域名所对应
引子 我想大家应该都很熟悉DNS了,这回在DNS前面加了一个D又变成了什么呢?这个D就是Dynamic(动态),也就是说,按照传统,一个域名所对应的IP地址应该是定死的,而使用了DDNS后,域名所对应 ...
- CSS兼容IE6,IE7,FF的技巧（COPY来的，还没看）
一.CSS HACK 以下两种方法几乎能解决现今所有HACK.翻阅很多资料,已测试可以使用. 1, !important 随着IE7对!important的支持, !important 方法现在只针对 ...
- 小米mix2s html,【小米MIX2s评测】性能·骁龙845确实很强 但小米没压住_小米 MIX 2s（6GB RAM/全网通）_手机评测-中关村在线...
性能 · 骁龙845确实很强 但小米没压住 "为发烧而生"的小米手机,当然离不开强悍的性能硬件.小米MIX 2S应该是第一款能够买到的骁龙845移动平台的国产手机,并且搭载LPDD ...
- 无线鼠标 桌面服务器,你可能不知道 桌面总是乱糟糟的很可能是因为你没买对鼠标...
原标题:你可能不知道 桌面总是乱糟糟的很可能是因为你没买对鼠标 [PC鲤选清单]无线耳机.无线充电.甚至显示器都能无线化了,都9102年了,为什么还要忍受一堆凌乱的数据线.耳机线.充电线?如果你和我一 ...
- NP管理器和MT哪个强_MT管理器相信大家都很熟悉的[勉强]，功能可以说非常强大，开发逆向的时候经常需要用到。...
MT管理器相信大家都很熟悉的[勉强],功能可以说非常强大,开发逆向的时候经常需要用到. 但是有些功能是需要购买VIP才能体验的.像我们这种穷人只能看着流泪[转圈哭] 还在眼馋MT的功能?快来试试今天冷 ...
- css text top,text-align属性(css中文本对齐属性)
text-align属性 设置h1.h2.h3元素的文本对齐方法: h1{text-align:center} h2{text-align:left} h3{text-align:right} 亲自试 ...
- html按钮按下效果_【CSS小分享】纯CSS实现一个水波纹效果按钮
前言 如果大家有用过Material Design风格的UI库,那么一定对水波纹按钮很熟悉,我们这次就是使用纯CSS实现一个最简单的水波纹效果按钮,先上成品: 原理 在按钮中放置一个默认隐藏径向渐变的 ...
- [css] 你有用过哪些css框架？说说它们的特点
[css] 你有用过哪些css框架?说说它们的特点 bootstrap 不够全,所以后来基本都是借鉴思路取长补短自己写的 css 类库或原子类库. animate.css 用起来很爽,主要用于滚动和小 ...
- [css] 如何写高效的CSS？
[css] 如何写高效的CSS? 唔,自动补全.预编译这些辅助手段确实能提升一定的效率, 但我觉得真正能提升效率的是,不看预览就敢上手的理论知识. 见过太多加几行就要预览下效果的开发了,哪怕给他双屏其 ...
- css覆盖规则_条件 CSS
在CSS的世界中,总是有很多实验性的属性先行,正因为这些先行者在不断的探索新的特性,才让CSS越来越强大.而这些实验性的特性并没有立马得到众多浏览器的支持,为了能让这些实验性特性能在部分支持的浏览器上 ...
最新文章
- mongo java mapreduce_MongoDB中MapReduce介绍与使用
- Html5 History API解析
- 3. 回归的线性模型（2）
- Tomcat 的 Server 文件配置详解
- mysql主从同步面试题_面试被问MySQL 主从复制，怎么破？
- 介绍几个专门面向中文的命名实体识别和关系抽取工具
- 16小时31分12秒！2019天猫双11成交额超2135亿元，超越2018年全天成交额
- NOIP201501金币
- 使用@Conditional条件注解
- TinyPNG压缩图片的网站
- OpenCV读写视频(编解码器)
- AIC和BIC准则详解
- 电脑重装系统不小心格式化了恢复文件教程
- 【千锋Python2205班10.8笔记-day11-函数基础（一阶段）】
- python画频率直方图_用matplotlib画直方图（histogram）
- 【deepin】安装与设置win10独立双系统 - 战神Z7-SL7S3安装deepin15.11,并双屏显示
- 【信息安全】屁股决定脑袋的COSO内控框架，一篇对COSO的趣评
- 初识动态规划（一）简单入门动态规划与上手操作
- PLL中的locked信号解析
- 蛋白质集合c语言算法,利用蛋白质序列的预测方法