1. 使用 Shape-outside 在浮动图像周围弯曲文本
它是一个允许设置形状的 CSS 属性。它还有助于定义文本流动的区域。css代码：
.any-shape { width: 300px; float: left; shape-outside: circle(50%); }
2. 魔法组合
这个小组合实际上可以防止你在 HTML 中遇到的大多数布局错误的问题。我们确实不希望水平滑块或绝对定位的项目做他们想做的事情，也不希望到处都是随机的边距和填充。所以这是你们的魔法组合。
* { padding: 0; margin: 0; max-width: 100%; overflow-x: hidden; position: relative; display: block; }
有时“display:block”没有用，但在大多数情况下，你会将 和 视为与其他块一样的块。所以，在大多数情况下，它实际上会帮助你！
3. 拆分 HTML 和 CSS
4. ::首字母
它将样式应用于块级元素的第一个字母。因此，我们可以从印刷或纸质杂志中引入我们熟悉的效果。如果没有这个伪元素，我们将不得不创建许多跨度来实现这种效果。例如：
p.intro:first-letter { font-size: 100px; display: block; float: left; line-height: .5; margin: 15px 15px 10px 0 ; }
5. 四大核心属性
CSS 动画提供了一种相对简单的方法来在大量属性之间平滑过渡。良好的动画界面依赖于流畅流畅的体验。为了在我们的动画时间线中保持良好的性能，我们必须将我们的动画属性限制为以下四个核心：
- 缩放 - transform:scale(2)
- 旋转 - transform:rotate(180deg)
- 位置 – transform:translateX(50rem)
- 不透明度 - opacity: 0.5
6. 使用变量保持一致
保持一致性的一个好方法是使用 CSS 变量或预处理器变量来预定义动画时间。
:root{ timing-base: 1000;}
7. 圆锥梯度
.piechart { background: conic-gradient(rgb(255, 132, 45) 0% 25%, rgb(166, 195, 209) 25% 56%, #ffb50d 56% 100%); border-radius: 50%; width: 300px; height: 300px; }
8. 更改文本选择颜色
要更改文本选择颜色，我们使用 ::selection。它是一个伪元素，在浏览器级别覆盖以使用您选择的颜色替换文本突出显示颜色。使用光标选择内容后即可看到效果。
::selection { background-color: #f3b70f; }
9. 悬停效果
悬停效果通常用于按钮、文本链接、站点的块部分、图标等。如果您想在有人将鼠标悬停在其上时更改颜色，只需使用相同的 CSS，但要添加 :hover到它并更改样式。这是您的方法；
.m h2{ font-size:36px; color:#000; font-weight:800; } .m h2:hover{ color:#f00; }
当有人将鼠标悬停在 h2 标签上时，这会将您的 h2 标签的颜色从黑色更改为红色。它非常有用，因为如果您不想更改它，则不必再次声明字体大小或粗细。它只会更改您指定的任何属性。
10.投影
添加此属性可为透明图像带来更好的阴影效果。您可以使用给定的代码行执行此操作。
.img-wrapper img{ width: 100% ; height: 100% ; object-fit: cover ; filter: drop-shadow(30px 10px 4px #757575); }
11. 使用放置项居中 Div
main{ width: 100% ; height: 80vh ; display: grid ; place-items: center center; }
12. 使用 Flexbox 居中 Div
我们已经使用地点项目将项目居中。但是现在我们解决了一个经典问题，使用 flexbox 将 div 居中。为此，让我们看一下下面的示例：
<div class="center h-48"> <div></div> </div>
.center { display: flex; align-items: center; justify-content: center; } .center div { width: 100px; height: 100px; border-radius: 50%; background: #b8b7cd; }
首先，我们需要确保父容器持有圆，即 flex-container。在它里面，我们有一个简单的 div 来制作我们的圆圈。我们需要使用以下与 flexbox 相关的重要属性：
