阅读 14600

送给大家的每日 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>
复制代码

效果：

image.png

技巧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>
复制代码

效果：

GIF.gif

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

技巧3：顺滑滚动

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

效果：

GIF.gif

技巧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>
复制代码

效果：

GIF.gif

技巧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>
复制代码

效果：

image.png

技巧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>
复制代码

效果：

GIF.gif

技巧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 占据第一、第二列 */
.image { grid-column: 1 / 3; }
/* .body 占据第二列到最后一列 */
.body { 
  grid-column: 2 / -1;
}

<style>
复制代码

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

image.png

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

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

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

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

效果：

GIF.gif

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

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

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

效果：

image.png

可以看见，斜线前的值控制的是角的第一个角半径值，斜线后的值控制的是角的第二个角半径值。控制顺序是从左上角（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>
复制代码

效果：

GIF.gif

技巧11：响应式多列布局

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

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

效果：

GIF.gif

技巧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>
复制代码

查看效果：

GIF.gif

技巧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>
复制代码

效果：

GIF.gif

.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;
  */
}
复制代码

查看演示：

GIF.gif

从上面的演示，可以看出来 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>
复制代码

查看演示：

GIF.gif

技巧16：贴底 footer

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

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

效果：

  1. 使用前

EOZ8UeiWsAAoMUN.jpg

  1. 使用后

EOZ8Uu3W4AMfO1_.jpg

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

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

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

效果：

  1. 原来

EOf46yvXsAAIwtq.jpg

  1. 现在

EOf460IX0AM3MPv.jpg

技巧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; }
复制代码

效果：

GIF.gif

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

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

EOqLLy0WkAUxRJL.jpg

技巧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 了。

image.png

技巧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;
}
复制代码

效果：

image.png

技巧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;
}
复制代码

image.png

技巧23：推荐 body 行高 1.6

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

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

EO-ydbCWoAA0Nr-.jpg

技巧24：文字描边效果

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

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

效果：

image.png

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

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

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

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

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

效果：

image.png

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

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

image.png

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

image.png

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

image.png

是吧。这里需要注意的是，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>
复制代码

效果：

image.png

技巧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>
复制代码

效果：

GIF.gif

技巧29：为所有的元素加个 outline 找问题

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

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

效果：

EPc49zPWAAAOch0.jpg

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

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

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

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

效果：

EPi1lmgWAAIhDd5.jpg

技巧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>
复制代码

效果：

GIF.gif

相关链接

（正文完）

广告时间（长期有效）

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

（完）