12个值得收藏的 CSS 技巧！！

96 阅读 0 评论 64 点赞

我是靠谱客的博主孝顺鞋垫，最近开发中收集的这篇文章主要介绍12个值得收藏的 CSS 技巧！！，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本篇文章给大家分享12个值得收藏的 CSS 技巧，大家可以试着记住，在关键时可救命哟！希望对大家有所帮助！

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”没有用，但在大多数情况下，你会将 <a> 和 <span> 视为与其他块一样的块。所以，在大多数情况下，它实际上会帮助你！

3. 拆分 HTML 和 CSS

这更像是一种“工作流程”类型的技巧。我建议你在开发时创建不同的 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 相关的重要属性：