技巧一 ：渐变色文字
Gradient text
效果：
技巧二：下划线动画效果
Lorem ipsum dolor sit amet ... beatae, quo iure ... consequatur.
效果：
技巧三：顺滑滚动
html {
scroll-behavior: smooth;
}
效果：
技巧四：text-shadow多阴影设置
This is fun
效果：
技巧5：背景混合
使用 background-blend-mode 属性，能将元素背景色与背景图片按照不同的模式（mode）混合在一起，制造出不同的混合效果。
效果：
技巧6：基于媒体查询，改变 Grid 布局
如果我们的 Grid 项目是基于 grid-area 设置布局的，那么可以借助媒体查询，通过调整 Grid 容器元素的 grid-template-areas 属性，将能非常容易的变换布局结构。
Ramsey Harper
Graphic Designer
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?
效果：
技巧7：使用 Grid 布局实现内容重叠
Grid 简化了很多布局方式，包括内容重叠。使用 Grid 实现内容重叠通常比使用 position: absolute 要简单得多，也比尝试使用负边距要好得多。
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!
效果：
技巧11：响应式多列布局
通过下面一句声明，就能实现文章内容的多列响应式布局！
.content {
columns: 200px;
}
效果：
技巧12：使用 box-shadow 营造多边框叠加效果
box-shadow 属性有一个设置扩散半径的语法：
我们就是使用这个扩散半径语法实现多边框叠加效果的：
Lorem ipsum dolor ... Velit, pariatur placeat!
效果：
技巧13：Flexbox 的 margin auto 布局
在 Flex 容器中，我们可以使用 margin auto 技术，控制 Flex 项目的对齐方式。margin auto 的含义是对所在方向上的剩余空间进行分配。
以下面的代码为例：
left
right
效果：
.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 项目。
Hello!
演示：
技巧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 设置网页里的一篇文章。
The first child pseudo-selector
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.
Excepturi,... soluta suscipit eveniet enim facilis eius quis?
Itaque at, aut ... Delectus minus quis dignissimos commodi. Culpa, nesciunt!
Aliquam itaque perferendis ... deserunt odio laudantium vel obcaecati!
设置后，发现文章第一个自然段的文字大小变成 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 {
line-height: 1.6;
}
技巧24：文字描边效果
Why didn't I know about this sooner?
效果：
技巧25：在 Grid 布局中实现垂直居中效果
Flexbox 中的垂直居中效果实现。
.flex {
display: flex;
justify-content: center;
align-items: center;
}
Grid 垂直居中方式甚至更简单：
.grid {
display: grid;
place-items: center;
}
效果：
技巧26：drop-shadow 这个 filter 功能函数用过没？
技巧27：:not 伪类的妙用
:not 有很多使用方式。比如用它和 :first-child/:last-child 结合使用，就能实现设置除第一个/最后一个之外的元素样式。
效果：
技巧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 结合使用，就能实现浮动标签效果。