.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”没有用，但在大多数情形下，你会将 <a> 和 <span> 视为与其他块一样的块。以是，在大多数情形下，它实际上会帮助你！
这更像是一种“事情流程”类型的技巧。我建议你在开拓时创建不同的 CSS 文件，末了才合并它们。例如，一个用于桌面，一个用于移动等。末了，你必须合并它们，由于这将有助于最大限度地减少您网站的 HTTP 要求数量。
同样的原则也适用于 HTML。如果你不是在 Gatsby 等 SPA 环境中进行开拓，那么 PHP 可用于包含 HTML 代码片段。例如，你希望在单独的文件中保留一个“/modules”文件夹，该文件夹将包含导航栏、页脚等。因此，如果须要进行任何变动，你不必在每个页面上都对其进行编辑。模块化越多，结果就越好。
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边框半径、高度/宽度或边距等动画属性会影响浏览器布局方法，而背景、颜色或框阴影的动画会影响浏览器绘制方法。所有这些都会大大降落您的 FPS (FramesPerSecond)。您可以利用这些属性来产生一些有趣的效果，但应谨慎利用它们以保持良好的性能。
6. 利用变量保持同等保持同等性的一个好方法是利用 CSS 变量或预处理器变量来预定义动画韶光。
:root{ timing-base: 1000;}复制代码
在不定义单元的情形下设置基线动画或过渡持续韶光为我们供应了在 calc() 函数中调用此持续韶光的灵巧性。此持续韶光可能与我们的基本 CSS 变量不同，但它始终是对该数字的大略修正，并将始终保持同等的体验。
7. 圆锥梯度有没有想过是否可以只利用 CSS 创建饼图？好是，您实际上可以！
这可以利用 conic-gradient 函数来完成。此函数创建一个由渐变组成的图像，个中设置的颜色过渡环绕中央点旋转。您可以利用以下代码行实行此操作：
.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
居中 div 元素是我们必须实行的最恐怖的任务之一。但不症结怕我的朋友，你可以用几行 CSS 将任何 div 居中。只是不要忘却设置display:grid; 对付父元素，然后利用如下所示的 place-items 属性。
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 干系的主要属性：
display: flex; 这确保父容用具有 flexbox 布局。align-items: center; 这可确保 flex 子项与横轴的中央对齐。justify-content: center; 这确保 flex 子项与主轴的中央对齐。之后，我们就有了常用的圆形 CSS 代码。现在这个圆是垂直和水平居中的，试试吧！
如果你以为此文对你有一丁点帮助，点个赞。或者可以加入我的开拓互换群：1025263163相互学习，我们会有专业的技能答疑解惑
如果你以为这篇文章对你有点用的话，麻烦请给我们的开源项目点点star: https://gitee.com/ZhongBangKeJi/CRMEB不胜感激 ！
