送给你们的每日 CSS 技巧（内含大量高清动图，手机端慎入！）

从 2020 年第一天开始，程序员 Kevin Powell 天天在 Twitter 的 #CSSTipOfTheDay 话题下，发布一篇 CSS 技巧 。不只如此，每篇技巧在 codepen 上都要对应可运行 demo，你能够 在这里看到 到目前为止 Kevin Powell 已发布的全部 CSS 技巧集合。

下面是我根据他过去一个月已发布的 31 篇 CSS 技巧作的笔记整理，但愿能帮到你们！

技巧1：渐变色文字

<h2 class="gradient-text">Gradient text</h2>

<style> .gradient-text { background-image: linear-gradient(90deg, red, blue); background-clip: text; color: transparent; } </style>
复制代码

效果：

技巧2：下换线动画效果

<p>Lorem ipsum dolor <a class="fancy-link" href="#">sit amet ... beatae</a>, quo iure ... consequatur.</p>

<style> .fancy-link { text-decoration: none; background-image: linear-gradient(red, red); background-repeat: no-repeat; background-position: bottom left; background-size: 0 3px; transition: background-size 500ms ease-in-out; } .fancy-link:hover { background-size: 100% 3px; } </style>
复制代码

效果：

实现原理：经过控制背景图片（background-image）的尺寸（background-size）来实现虚拟的下划线效果的。

技巧3：顺滑滚动

html {
  scroll-behavior: smooth;
}
复制代码

效果：

技巧4：text-shadow 多阴影设置

<h2 class="so-many-shadows">This is fun</h2>

<style> .so-many-shadows { text-shadow: 3px 3px 0 yellow, 6px 6px 0 blue, 9px 9px red, 12px 12px 0 black; } </style>
复制代码

效果：

技巧5：背景混合

使用 background-blend-mode 属性，能将元素背景色与背景图片按照不一样的模式（mode）混合在一块儿，制造出不一样的混合效果。

<div class="content">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

<style> .one, .two, .three { background-color: orange; background-image: url(https://picsum.photos/id/1005/600/600); } .one { background-blend-mode: screen; } .two { background-blend-mode: multiply; } .three { background-blend-mode: overlay; } </style>
复制代码

效果：

技巧6：基于媒体查询，改变 Grid 布局

若是咱们的 Grid 项目是基于 grid-area 设置布局的，那么能够借助媒体查询，经过调整 Grid 容器元素的 grid-template-areas 属性，将能很是容易的变换布局结构。

<div class="card">
  <img src="https://i.pravatar.cc/125?image=3" alt="" class="profile-img">
  <ul class="social-list">
    <li><a href="#" class="social-link"><i class="fab fa-dribbble-square"></i></a></li>
    <li><a href="#" class="social-link"><i class="fab fa-facebook-square"></i></a></li>
    <li><a href="#" class="social-link"><i class="fab fa-twitter-square"></i></a></li>
  </ul>
  <h2 class="profile-name">Ramsey Harper</h2>
  <p class="profile-position">Graphic Designer</p>
  <p class="profile-info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere a tempore, dignissimos odit accusantium repellat quidem, sit molestias dolorum placeat quas debitis ipsum esse rerum?</p>
</div>

<style> .card { display: grid; grid-template-columns: 1fr; grid-column-gap: 2em; /* 默认采用垂直布局 */ grid-template-areas: "name" "image" "social" "position" "description"; } /* 利用媒体查询，当视口宽度大于 600px 的时候， 采用更易于阅读的双列布局方式 */ @media (min-width: 600px) { .card { text-align: left; grid-template-columns: 1fr 3fr; grid-template-areas: "image name" "image position" "social description"; } } .profile-name { grid-area: name; } .profile-position { grid-area: position; } .profile-info { grid-area: description; } .profile-img { grid-area: image; } .social-list { grid-area: social; } </style>
复制代码

效果：

技巧7：使用 Grid 布局实现内容重叠

Grid 简化了不少布局方式，包括内容重叠。使用 Grid 实现内容重叠一般比使用 position: absolute 要简单得多，也比尝试使用负边距要好得多。

<div class="grid">
  <img src="https://unsplash.it/200/300" alt="" class="image">
  <p class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam veritatis repudiandae, ut soluta autem dolorum. Nesciunt dolore ipsum corporis modi magni labore voluptatibus, harum maiores!</p>
</div>

<style> .grid { display: grid; grid-template-columns: repeat(5, 1fr); } /* .image, .body 都占据一行 */ .image, .body { grid-row: 1 / 2; align-self: center; } /* .image 占据第1、第二列 */ .image { grid-column: 1 / 3; } /* .body 占据第二列到最后一列 */ .body { grid-column: 2 / -1; } <style> 复制代码

效果（这里使用了 Firefox 的网格布局观察器查看，显示了行号）：

阅读文章，了解更多：www.freecodecamp.org/news/css-gr…

技巧8：使用 outline 实现偏移“边框”效果

咱们可使用 outline 简单的模拟出元素边框效果，与 outline-offset 属性结合使用，还能制做出偏移“边框”效果出来。

.outline {
  outline: 2px solid white;
  outline-offset: -10px;
}
复制代码

效果：

技巧9：border-radius 的斜线语法

border-radius 除了普通的四个值语法外，还能使用用斜线分割的、最多 8 个值的语法，后者能够更加细粒度的控制每一个角的两个角半径值：斜线以前的值设置的是水平半径，斜线以后的值设置的是垂直半径。

.border-radius {
  border-radius: 50px 25px / 25px 50px;
}
复制代码

效果：

能够看见，斜线前的值控制的是角的第一个角半径值，斜线后的值控制的是角的第二个角半径值。控制顺序是从左上角（border-top-left-raduis）开始顺时针旋转的。

技巧10：背景图片从文字透出

<h2 class="image-text">This is pretty easy!</h2>

<style> .image-text { background-image: url(https://picsum.photos/id/865/300/100); background-size: cover; background-clip: text; color: transparent; } </style>
复制代码

效果：

技巧11：响应式多列布局

经过下面一句声明，就能实现文章内容的多列响应式布局！

.content {
  columns: 200px;
}
复制代码

效果：

技巧12：使用 box-shadow 营造多边框叠加效果

box-shadow 属性有一个设置扩散半径的语法：

咱们就是使用这个扩散半径语法实现多边框叠加效果的：

<div class="content">
  <p>Lorem ipsum dolor ... Velit, pariatur placeat!</p>
</div>

<style> .content { box-shadow: 0 0 0 10px #EE6352, 0 0 0 20px #D45379, 0 0 0 30px #A4558F, 0 0 0 40px #6D588E, 0 0 0 50px #405378; } </style>
复制代码

查看效果：

技巧13：Flexbox 的 margin auto 布局

在 Flex 容器中，咱们可使用 margin auto 技术，控制 Flex 项目的对齐方式。margin auto 的含义是对所在方向上的剩余空间进行分配。

如下面的代码为例：

<div class="content">
  <div class="box left">left</div>
  <div class="box right">right</div>
</div>

<style> .content { display: flex; } .left { margin: 0 auto; } .right { margin-left: auto; } </style>
复制代码

效果：

.left 左右 margin auto 了，.right 只有左边的 margin auto 了。至关于：把当前剩余水平空间平均分红了 3 份，分别分到了 .left 的两边和 .right 的左边。由上图可知，每份的大小是 132.609px。

技巧14：background-repeat space 用过没？

.content {
  background-repeat: space no-repeat;
  /* 等同于 background-repeat-x: space; background-repeat-y: no-repeat; */
}
复制代码

查看演示：

从上面的演示，能够看出来 repeat 与 space 关键字的不一样之处在于：使用 background-repeat-x: space 时，老是能保证当前视界范围内的星星数量是整数个，至关因而使用 background-repeat-x: ``repeat 设定背景时，把那个彻底没有露出来的星星去掉，将富裕出来的空间平均地分配到余下星星之间获得的效果。

技巧15： 在 Flex 容器中如何垂直居中

在 Flex 容器中，咱们在使用 margin-top: auto; margin-bottom: auto; 垂直居中 Flex 项目。

<div class="content parent">
	<p class="child">Hello!</p>
</div>

<style> .content { display: flex; /* 或是 grid */ } .child { margin-top: auto; margin-bottom: auto } </style>
复制代码

查看演示：

技巧16：贴底 footer

上一条技巧里学习了，使用 margin auto 实现垂直居中效果。若是只是使用 margin-top: auto，会发现元素被推到了底部——这就是实现贴底 footer 的技巧所在。

.card__footer {
  margin-top: auto;
}
复制代码

效果：

1. 使用前

2. 使用后

技巧17：为被选择的文本设置样式

使用 ::selection 伪元素选择器，为被选择的文本设置样式。

::selection {
  background-color: rgba(238, 99, 82,1);
  color: white;
}
复制代码

效果：

1. 原来

2. 如今

技巧18：基于 rem 值设置元素的 padding 值

为元素设置 padding 时，可使用 em、rem 这样的相对单位。这样在元素文字大小修改后，padding 计算值就跟着改变了。

.btn { padding: .75rem 1.5rem; }
.btn-small  { font-size: .9rem; }
.btn-normal { font-size: 1.25rem; }
.btn-large  { font-size: 1.5rem; }
复制代码

效果：

技巧19：做为设计元素使用的伪元素

伪元素能够做为额外的设计元素添加进页面中。连接里给出的是一个比较极端的示例，目的是为了让你了解一行 HTML 能够作多少事情。

技巧20：控制第一个段落的样式

咱们用 p:first-of-type 设置网页里的一篇文章。

<main class="main">
  <h2>The first child pseudo-selector</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae porro dolor commodi consequatur consectetur dolores omnis perferendis! Earum ab facilis rerum blanditiis labore? Praesentium, ea similique dolorum et harum voluptate.</p>
  <p>Excepturi,... soluta suscipit eveniet enim facilis eius quis?</p>
  <p>Itaque at, aut ... Delectus minus quis dignissimos commodi. Culpa, nesciunt!</p>
  <p>Aliquam itaque perferendis ... deserunt odio laudantium vel obcaecati!</p>
</main>

<style> .main { font-size: 1rem; } .main p:first-of-type { font-size: 1.25rem; } </style>
复制代码

设置后，发现文章第一个天然段的文字大小变成 1.25rem 了。

技巧21：多背景元素

background-image 支持同时设置多个背景，每一个背景地址之间使用逗号分隔便可。

.content {
  background-image: 
    url(assets/img/flags.png), 
    url(assets/img/suns.jpg);
  background-repeat: repeat-x, repeat;
  background-size: 175px, auto;
}
复制代码

效果：

技巧22：Grid 项目相对谁定位的？

若是将 Grid 项目设置为 position: absolute，Grid 容器设置了 position: relative。结果发现，Grid 项目并不是是相对容器定位的，而是相对于 Grid 项目所占据的网格区域（grid area） 定位的。

.grid {
  position: relative;
  display: grid;
  grid-template-rows: repeat(2, 25vh);
  grid-template-columns: repeat(4, 1fr);
}
.grid-item {
  grid-row: 1 / 2;
  grid-column: 1 / 4;
  position: absolute;
  left: 25px;
  right: 25px;
  top: 25px;
  bottom: 25px;
}
复制代码

技巧23：推荐 body 行高 1.6

建议新项目的 body 行高值设置为 1.6，这是通用建议。固然，基于 font、行宽和 font-size 值的不一样，我 
我倾向于设置 1.4 和 1.6 之间的 line-height 值。

body {
  line-height: 1.6;
}
复制代码

技巧24：文字描边效果

<p class="outline">Why didn't I know about this sooner?</p>

<style> .outline { color: white; -webkit-text-stroke: 2px black; } </style>
复制代码

效果：

技巧25：在 Grid 布局中实现垂直居中效果

Flexbox 中的垂直居中效果实现，你们应该都用过吧。

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
复制代码

Grid 垂直居中方式甚至更简单：

.grid {
  display: grid;
  place-items: center;
}
复制代码

效果：

技巧26：drop-shadow 这个 filter 功能函数用过没？

这边有一张背景透明的 png 图片。想要给图片里的文字加阴影怎么办呢？

使用 box-shadow 吗？看看效果：

不行。其实改用 drop-shadow 就好了。

是吧。这里须要注意的是，drop-shadow 是做为 filter 的功能函数出现的，语法与 box-shadow 很像。前面使用的是 box-shadow: 10px 10px 10px black 的写法，后者的写法则是 filter: drop-shadow(10px 10px 10px black)，像吧。

技巧27：:not 伪类的妙用

:not 有不少使用方式。好比用它和 :first-child/:last-child 结合使用，就能实现设置除第一个/最后一个以外的元素样式。

<nav class="nav">
  <ul class="nav-list">
    <li class="nav-item"><a href="" class="nav-link">Home</a></li>
    <li class="nav-item"><a href="" class="nav-link">About</a></li>
    <li class="nav-item"><a href="" class="nav-link">Support</a></li>
    <li class="nav-item"><a href="" class="nav-link">Blog</a></li>
    <li class="nav-item"><a href="" class="nav-link">Contact</a></li>
  </ul>
</nav>

<style> .nav-item:not(:last-child) { border-bottom: 1px solid rgba(0,0,0,.25); } <style> 复制代码

效果：

技巧28：Flexbox 的 gap 属性回退方案

Grid 布局里控制 Grid 项目间隙的属性 grid-gap，已经修改成更通用的 gap 属性了。Flexbox 布局中也能使用这个属性控制 Flex 项目的间隙，但如今只有 Firefox 浏览器实现了这个功能。这里给出了一个回退方案，让你在 Flexbox 中也能控制项目间的间隙。

<div class="content">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

<style> .content { display: flex; } .content > * + * { margin-left: 1em;} </style>
复制代码

效果：

技巧29：为全部的元素加个 outline 找问题

布局网页时，有时会看到网页被莫名其妙戳出一个横向滚动条出来，不知道是哪一个（些）元素搞的鬼。这时候，能够给网页里全部元素都添加一个 outline，找出问题所在：

* { outline: 2px solid limegreen; }
复制代码

效果：

技巧30：自定义输入框的占位文本样式

咱们可使用 ::placeholder 伪元素自定义输入框的占位文本样式。

input { 
  font-weight: 800;
  color: #d27054;
}

::placeholder {
  opacity: 1;
  font-weight: 300;
  color: #666;
  font-size: 1rem;
}
复制代码

效果：

技巧31：实现浮动标签效果（float label）

:placeholder-shown 伪类顾名思义，匹配当前没有输入内容、显示占位文本的输入框。将 :placeholder-shown 与 :not 结合使用，就能实现浮动标签效果。

<div class="input-field">
  <input type="text" placeholder="Enter your first name" id="fname" />
  <label for="fname">First name</label>
</div>

<div class="input-field">
  <input type="text" placeholder="Enter your last name" id="lname" />
  <label for="lname">Last name</label>
</div>

<style> label { /* 默认标签文本是透明的 */ opacity: 0; /* 有所偏移的 */ transform: translateY(5px); /* 设置了过渡动画效果的（针对 opacity 和 transform 属性） */ transition: opacity linear 200ms, transform ease-in 150ms; } /* 在输入框中输入内容后，占位文本不可见，词条声明生效 */ input:not(:placeholder-shown) ~ label { /* 标签文本设置为可见 */ opacity: 1; /* 与 transition 结合起来，标签文本在可见的过程当中，出现浮动效果 */ transform: translateY(0px); } <style> 复制代码

效果：

相关连接

• twitter.com/hashtag/CSS…
• codepen.io/collection/…

（正文完）

---

广告时间（长期有效）

我有一位好朋友开了一间猫舍，在此帮她宣传一下。如今猫舍里养的都是布偶猫。若是你也是个爱猫人士而且有须要的话，不妨扫一扫她的【闲鱼】二维码。不买也没关系，看看也行。

（完）