您的位置：首页 > Web前端 > CSS

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

2020-03-19 20:29 316 查看

https://juejin.im/post/5e34d266f265da3e177f2000

从 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 占据第一、第二列 */
.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;
}
复制代码

效果：

使用前

使用后

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

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

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

效果：

原来

现在

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

效果：