22个必备的CSS小技巧

最新推荐文章于 2022-06-14 10:48:57 发布
最新推荐文章于 2022-06-14 10:48:57 发布
阅读量462 收藏 3
点赞数
分类专栏： 【HTML5+CSS3点滴知识 】

http://jrainlau.github.io/2016/07/03/%E3%80%90%E8%AF%91%E3%80%9122%E4%B8%AA%E5%BF%85%E5%A4%87%E7%9A%84CSS%E5%B0%8F%E6%8A%80%E5%B7%A7/?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io

混合模式

图片描述
不久之前Firefox和Safari浏览器已经开始支持类似Photoshop的混合模式，但是在Chrome和Opera浏览器中需要添加前缀。举个栗子：

1
2
3
4
5
6
7
8
 
// 你也可以尝试不同的样式

.blend {
    background: #fff;
}
.blend img {
    mix-blend-mode: darken; 
}

在线体验地址

渐变边框

图片描述
现在，你甚至可以在边框中使用渐变。
要使用渐变边框非常简单，只需要设置一个更低z-index的伪元素即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
.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属性，最终的代码会和下面一样：

1
2
3
4
 
.box {
    border-image: linear-gradient(to bottom, #000000 0%, #FFFFFF 100%); 
    border-image-slice: 1; /* set internal offset */
}

Z-INDEX的过渡

图片描述
也许你不知道z-index同样支持过渡！在过渡的每一步中，它的值都不发生改变，所以你以为它不支持过渡——但其实它支持。
举个栗子

CURRENTCOLOR

我们可以使用这个方法来侦测当前的颜色，以避免经常地重复定义它。
这个方法在使用SVG图标的时候非常有用，因为它们的颜色由其父元素决定。通常我们是这么做的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
.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这么做：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
svg {  
  fill: currentColor;
}

.button {
  color: black;
  border: 1px solid currentColor;
}
.button:hover {
  color: red;
}
.button:active {
  color: green;
}

附上其它带有伪元素的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
a {  
  color: #000;
}
a:hover {  
  color: #333;
}
a:active {  
  color: #666;
}

a:after,  
a:hover:after,  
a:active:after {  
  background: currentColor;
  ...
}

OBJECT FIT

你是否还记得为了解决一些问题而给一幅背景图设置background-size属性的时刻呢？现在你可以使用object-fit属性啦，webkit浏览器都支持它，Firefox也将在近期予以支持。

1
2
3
4
5
6
7
8
9
10
11
12
 
.image__contain {
  object-fit: contain; 
} 
.image__fill {
  object-fit: fill; 
}
.image__cover {
  object-fit: cover; 
}
.image__scale-down {
  object-fit: scale-down;
}

图片描述
举个栗子

单选框和复选框的样式

让我们一起不使用图片来设置复选框的样式：

1
2
3
 
<!-- html -->
<input type="checkbox" id="check" name="check" />
<label for="check">Checkbox</label>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<!-- css -->
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编码的字符将会显示出来。

值得注意的是，Unicode编码在CSS和HTML中的写法是不一样的。在CSS中它是一个以反斜杠为开始的十六进制数，而在HTML中它是十进制的，比如&#10003;。
接着为我们的复选框添加一些动画效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<!-- checkbox -->
input[type=checkbox] + label:before {  
    content: "\2713";
    color: transparent;
    transition: color ease .3s;
}
input[type=checkbox]:checked + label:before {  
    color: #000;
}

<!-- radio -->
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编码，以及可以在这里进行体验。

CSS中的计数器

总所周知CSS中是可以使用计数器的：

1
2
3
4
5
6
 
<!-- html -->
<ol class="list">  
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>

1
2
3
4
5
6
7
8
9
10
 
<!-- css -->
.list {
    counter-reset: i; //reset conunter
}
.list > li {
    counter-increment: i; //counter ID
}
.list li:after {
    content: "[" counter(i) "]"; //print the result
}

我们定义了一个ID在counter-reset属性中作为初始值（默认为0）。你可以设置另一个值在counter-increment属性中作为每一步的递增值。

高级CSS计数器

你可以计算出有多少个复选框被用户勾选了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<!-- html -->
<div class="languages">  
  <input id="c" type="checkbox"><label for="c">C</label>
  <input id="C++" type="checkbox"><label for="C++">C++</label>
  <input id="C#" type="checkbox"><label for="C#">C#</label>
  <input id="Java" type="checkbox"><label for="Java">Java</label>
  <input id="JavaScript" type="checkbox"><label for="JavaScript">JavaScript</label>
  <input id="PHP" type="checkbox"><label for="PHP">PHP</label>
  <input id="Python" type="checkbox"><label for="Python">Python</label>
  <input id="Ruby" type="checkbox"><label for="Ruby">Ruby</label>
</div>  
<p class="total">  
  Total selected:
</p>

1
2
3
4
5
6
7
8
9
10
 
<!-- css -->
.languages {
  counter-reset: characters;
}
input:checked {  
  counter-increment: characters;
}
.total:after {
  content: counter(characters);
}

图片描述

你也可以制作一个简单的计算器：

1
2
3
4
5
6
7
8
9
10
11
12
 
<!-- html -->
<div class="numbers">  
  <input id="one" type="checkbox"><label for="one">1</label>
  <input id="two" type="checkbox"><label for="two">2</label>
  <input id="three" type="checkbox"><label for="three">3</label>
  <input id="four" type="checkbox"><label for="four">4</label>
  <input id="five" type="checkbox"><label for="five">5</label>
  <input id="one-hundred" type="checkbox"><label for="one-hundred">100</label>
</div>  
<p class="sum">  
  Sum 
</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<!-- css -->
.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个方式去实现它：
1、 Shadows

1
2
3
4
5
6
7
8
9
10
11
12
 
.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;
}

2、 Gradient

1
2
3
 
.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%);
}

3、 UTF-8
你可以直接使用标准符号：☰ (Unicode: U+2630, HTML: ☰)。你也可以像其他元素那样灵活设置它的颜色或大小。看例子。
你也可以使用SVG，字体图标，或者通过伪元素设置的border边框。

@SUPPORTS

这是一个新的叫做supports的CSS表达式。顾名思义，它可以检测某些设定是否被浏览器所支持，并非所有的浏览器都支持它，但是你仍然可以使用它作为基本的检测手段：

1
2
3
4
5
6
7
8
9
10
11
12
13
 
@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: visible的元素放在一个设置为visibility: hidden的元素里面，会发生什么？

1
2
3
4
5
6
 
.hidden {
  visibility: hidden;
}
.hidden .visible {
  visibility: visible;
}

你可能会认为两个元素都不显示——然而事实上整个父元素都被隐藏了，而子元素不会。请看DEMO。

POSITION: STICKY

图片描述
我们发现了一个新的特性，你可以新建一个sticky属性的元素。它的运行效果和fixed相同，但不会挡住任何元素。你最好看看例子
只有Mozilla和Safari浏览器支持这一属性，但你也可以像下面那样使用它：

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

我们将会在支持的浏览器中得到一个sticky属性的元素，而在不支持的浏览器中它将会是一个普通的元素。这在你需要建立一个不可替代的，可以移动的元素的移动端页面的时候非常实用。

新的尺寸单位

不久之前，一些新的用以描述不同元素大小的尺寸单位问世了，它们是：

  • vw (viewport width) - 浏览器窗口宽度的1%。
  • vh (viewport height) - 同上，只不过用来描述高度。
  • vmin and vmax 设置介于vh和vw之间的最大最小值。

有趣的是，几乎所有的现代浏览器都能很好地支持它们，所以你可以放心地使用。
为什么我们需要这些新的单位？因为它们可以让不同的尺寸更容易被定义，你不要为父元素指定任何的百分比或者别的什么，请看例子：

1
2
3
4
 
.some-text {
    font-size: 100vh;
    line-height: 100vh;
}

图片描述

或者你可以设置一个漂亮的弹出框在屏幕中间：

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

这看起来酷毙了，看看在codepen的例子吧~
但是目前仍然有一些关于这些新单位的不足之处：

  • IE9应该用vm而不是vmin。
  • iOS7在使用vh的时候可能会有bug。
  • vmax至今并未得到全面的支持。

文字修饰

我们可以通过几行代码修改文字被选中时的效果：

1
2
3
4
5
6
7
8
9
 
*::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 / auto，它可能会滚动整个页面而不是你想要的那部分。-webkit-overflow-scrolling解决了这个问题，你可以在你的实际项目中体验一下。

使用硬件加速

有时候动画可能会导致用户的电脑卡顿，你可以在特定元素中使用硬件加速来避免这个问题：

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

你并不会察觉有什么不同，但浏览器会为这个元素进行3D硬件加速，在will-change这个特殊属性未被全面支持之前，这个方法还是很有用的。

UNICODE CLASSES

你可以用Unicode符号明名class：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
.❤ {
    ...
}
.☢ {
    ...
}
.☭ {
    ...
}
.★ {
    ...
}
.☯ {
    ...
}

但这其实是用来搞笑的，千万不要在大型项目中使用，因为不是所有的电脑都支持Unicode符号。

垂直方向的百分比边距

实际上垂直方向的排列计算是基于父元素的宽度而不是高度。定义两个元素：

1
2
3
4
5
 
<!-- html -->

<div class="parent">  
    <div class="child"></div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
 
<!-- css -->

.parent {
    height: 400px;
    width: 200px;
}
.child {
    height: 50%;
    padding-top: 25%;
    padding-bottom: 25%;
    width: 100%;
}

理论上，子元素的高会是父元素高的一半，但是看看我们实际得到的情况：
图片描述

记住，子元素的百分比是相对于父元素的宽度。

火狐浏览器的按钮边距

Firefox用它自己的方式去计算按钮的边距。这听起来有点奇怪，但它会自动地添加一些边距进去：
图片描述

可以用以下方法来修复这个问题：

1
2
3
4
5
6
7
 
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;
}

COLOR + BORDER = BORDER-COLOR

很少人知道，定义了一个元素的文字颜色，意味着这个元素的边框颜色也被定义了：

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

图片描述

古老浏览器的彩蛋

如果你仍需要适配IE7或者类似的古老浏览器，你可以在定义hack的时候使用笑脸符号，像这样：

1
2
3
 
body {  
    :) background: pink;
}

是不是很有趣？

barnett_y
关注
专栏目录
10个必备的CSS技巧总结
09-25
【CSS技巧详解】 1. **@font-face**：此规则允许网页设计师引入远程字体，...以上10个CSS技巧涵盖了字体、布局、响应式设计、动画、表单样式、可访问性等多个方面，熟练掌握这些技巧将大大提高网页设计的质量和效率。
Dreamweaver小技巧之应用CSS样式表
09-24
在本教程中，我们将探讨两个Dreamweaver中关于CSS样式的实用小技巧：去除超级链接的下划线以及创建可反复使用的外部CSS样式表。 首先，让我们看看如何去除超级链接的下划线并实现鼠标悬停时的变色效果。默认情况下...
CSS小技巧(一)
dengmozheng3391的博客
03-21 134
左右布局 将内部的子元素加浮动，父元素清除浮动即可。 代码： <!DOCTYPE html> <html> <head> <title>test</title> <style type="text/css"> .big{ width: 30...
CSS小技巧：
seraph的专栏
12-02 694
1.如何隐藏网页中的层DIVdiv的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白： 　　style="visibility: none;" 　　document.getElementById("typediv1").style.visibility="hidden";//隐藏 　　document.getElementById("typediv1").style.
CSS小技巧
hohocj的博客
12-15 488
一些你不知道的CSS使用小技巧
css小技巧
浪子无家怎回头
04-25 348
垂直居中 有好多次博主都有这样的需求，垂直居中显示某个DIV，我们知道CSS中天然有水平居中的样式text-align:center。唯独这个垂直居中无解。 当然你可以将容器设置为display:table，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现，但此种实现往往会因为display：table而
提升设计效率：10个必备CSS隐藏技巧
其他未列出的5个CSS hack可能包括更复杂的浏览器特性和技巧，如清除浮动、隐藏元素、自定义字体渲染、定位修复以及选择器优先级等。这些技术对于开发者来说是非常宝贵的，它们可以帮助创建更具响应性、兼容性和美观...
CSS BUG解决方法以及CSS BUG类的小技巧
09-27
总之，理解和掌握这些CSS Bug的解决方法及小技巧是每个前端开发者必备的技能，它们能帮助我们在创建跨浏览器兼容的网页时减少不必要的困扰，提高工作效率。在遇到问题时，及时查阅相关资源，如webjx.com和jb51.net上...
CSS的一些小技巧
码飞_CC的博客
01-14 509
之前做的一个笔记，在一个github上翻译而来，原文哪来的忘了。 CSS样式重置： *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } 继承box-sizing： html { box-sizing: border-box; } *, *::before, *::after ...
CSS各种小技巧
單棲情緒
03-14 274
背景图片100%充满屏幕： background-image: url(20.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center;*/ /*float实现的水平导航菜单居中*/ display: inline-block;  *disp
一些css实用小技巧
你蠢哭我咯的博客
08-06 597
1.CSS变量实现鼠标移上效果 html &amp;amp;amp;amp;amp;amp;amp;amp;lt;button class=&amp;amp;amp;amp;amp;amp;amp;quot;btn&amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;span&amp
70多个非常实用的web开发CSS小技巧
u014041540的博客
09-20 1037
1. 文字水平居中 将一段文字置于容器的水平中点，只要设置text-align属性即可： text-align:center;   2. 容器水平居中 先该容器设置一个明确宽度，然后将margin的水平值设为auto即可。 div#container {　width:760px;　margin:0 auto;　}   3. 文字垂直居中 单行文字的垂直居中，只要将行高与容...
几种css小技巧
weixin_44759289的博客
03-24 306
1、画三角形 //html <div class="box"> <div class="box-inner"> <div class="triangle bottom"></div> <div class="triangle right"></div> <div class="triangle top"></div> <div class="triangle left"></d
20个很有用的CSS技巧
weixin_30635053的博客
04-20 176
导语：下面这几个CSS技巧你可能不知道，1.彩色照片变黑白，2.所有元素垂直居中，3.禁用鼠标，4.模糊文字，小编学完能量满满的，觉得对CSS又充满了爱，你也来看看。 1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片，是不是很酷？ img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(...
10个css小技巧
weixin_45730243的博客
06-14 220
代码 二、透明图片阴影效果 代码 三、自定义 Cursor 代码 四、attr() 展示 tooltip 代码 五、核算清单 代码 六、_使用:is和:where添加元素样式 代码 七、手风琴效果 代码 八、侧边栏hover效果 代码 九、使用 first-letter 实现首字母大写 代码 十、使用before添加按钮的图标 代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值