8个很酷的CSS提示和技巧：这样做效果更好

CSS常用的技巧有哪些？如果你认为 CSS 仅用于“美化”网站、为文本添加一些颜色或只是制作酷炫的弹跳动画，那么你可能需要重新考虑所有 CSS 的功能。已经厌倦了使用和搜索“如何在 CSS 中执行 X 或如何实现 Y？” 或者只是想知道 CSS 的实际力量？这篇文章将告诉你所有你需要知道的关于 CSS 特性的一些很棒的技巧和窍门。它侧重于解释一些你可以使用级联样式表 (CSS) 完成的隐藏但有价值的事情。

整篇CSS提示和技巧文章将按顺序涵盖以下主题：

1. 光标
2. CSS 平滑滚动
3. CSS 形状
4. 使用 CSS 截断文本
5. 居中对齐 Flexbox
6. 制作阴影
7. 创建打字机效果
8. 使用 CSS 自定义属性

那么，你准备好发现一些有趣但很棒的技巧了吗？让我们开始讨论这个CSS常用技巧合集！

---

光标

CSS 附带了一些内置类型的游标 以满足你的需要。它们支持多种条件，具体取决于当前网站界面状态。例如，在加载项目时你可能需要一个加载状态游标。这告诉用户后台正在进行某些操作，他们需要等到获取完成。

如何添加游标？

当你将鼠标光标指向 Web 界面上的任何元素时，光标属性可帮助你设置鼠标光标。以下是一些可用的标准游标：

CSS 光标属性	描述
cursor: wait	这表明程序很忙，用户无法与界面交互，直到它恢复到默认值。
cursor: help	这表明有一些帮助信息可用。
cursor: crosshair	此十字光标用于指示媒体或位图的选择。
cursor: grab	这用于你想要显示元素可以被抓取的情况。

例子：

让我们来看看如何将其与输出一起实现。

<div>
	<div class="demo-waiting">Waiting...</div>
	<div class="demo-help">Get help</div>
	<div class="demo-crosshair">Crosshair</div>
	<div class="demo-grab">Grab</div>
</div>

这定义了嵌套在 div 容器内的四个不同级别的标题。我们希望每一个在 CSS 中都有不同的光标值。这是我们如何做到的：

div.demo-waiting {
  cursor: wait;
}

div.demo-help {
  cursor: help;
}

div.demo-crosshair {
    cursor: crosshair;
}

div.demo-grab {
    cursor: grab;
}

你可以在此处尝试结果：等待...得到帮助十字准线抓住

添加自定义表情符号和图像光标！

CSS提示和技巧：想要更进一步自定义默认光标？使用 CSS，你可以用你最喜欢的图像或表情符号替换无聊的光标！让我们制作以下演示来说明这一点：

快乐的伤心

看起来很酷吧？这是相同的 CSS 代码：

.happy {
	cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png"), auto;
}
  
.sad { 
	cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sad.png"), auto;
}

如你所见，我们只需要使用带有两个参数的 url() 函数，第一个是指向表情符号或图像的链接（支持 SVG 和 PNG），如果这不起作用，它就会落下回到系统光标的自动模式。在官方文档中了解更多相关信息 。

---

CSS 平滑滚动

CSS常用技巧合集：CSS 中的平滑滚动功能让我们可以在触发滚动时设置滚动框的行为。它有两个简单的属性；自动和平滑。当设置为 auto 时，你会看到滚动框会立即滚动而平滑，它使用用户平台决定的计时功能平滑滚动。

例子：

最好的例子是当我们需要滚动到网页上的特定部分时。

<div class="scroll-container">
  <h3 class="scroll-page scroll-page-1">1st Section</h3>
  <h3 class="scroll-page scroll-page-2">2nd Section</h3>
  <h3 class="scroll-page scroll-page-3">3rd Section</h3>
</div>

我们制作了一个父滚动容器，其中包含三个具有不同类名的子元素。

.scroll-container {
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

.scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.scroll-page-1 {
	background: #f0de7a;
}

.scroll-page-2 {
	background: #afe69a;
}

.scroll-page-3 {
	background: #b8b7cd;
}

在scroll-container类上，我们添加了滚动行为：smooth; 属性让我们可以在下一个子元素上平滑滚动：（图略）

---

CSS常用的技巧有哪些：CSS 形状

如果你想制作自定义或预定义的形状，你只需要编写一些基本的 CSS！无论是圆形、三角形，甚至是星星！让我们看看如何制作它们。

做一个圆圈：

<div class="circle"></div>

对，就是那样！你只需要一个 div 元素，其他一切都将由 CSS 处理。

div.circle {
  width: 300px;
  height: 300px;
  background: #2762e9;
  border-radius: 50%;
}

重要的部分是我们需要给它一个相等的宽度和高度的值，然后使用border-radius 属性来完全圆化边框。这给了我们我们的圈子：

做一个三角形：

div.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #2762e9;
}

HTML 只需要一个 div，就像一个圆圈一样，但这里有两点需要注意；首先，确保将宽度和高度都设置为零。这确保我们的形状不会超过给定的边框长度。

其次，给单独的左右边框以确保边框值相等以获得完美的三角形和透明颜色，因为如果在那里添加任何其他颜色值，它将显示正方形的修剪部分。可以将三角形的任何颜色添加到边框底部。

以下是我们将在此之后得到的：

做一颗星星：

div.demo-star {
  position: relative; 
  display: block;
  color: #2762e9;
  width: 0;
  height: 0;
  border-right: 100px solid transparent;
  border-bottom: 70px solid #2762e9;
  border-left: 100px solid transparent;
  transform: rotate(35deg); 
}

div.demo-star:before {
  border-bottom: 80px solid #2762e9;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -45px;
  left: -65px;
  display: block;
  content: ' ';
  transform: rotate(-35deg);
}

div.demo-star:after {
   position: absolute;
   display: block;
   color: #2762e9;
   top: 3px;
   left: -105px;
   width: 0;
   height: 0;
   border-right: 100px solid transparent;
   border-bottom: 70px solid #2762e9;
   border-left: 100px solid transparent;
   transform: rotate(-70deg);
   content: ' ';
}

使用单个 div，我们可以使用CSS 伪类， 如:before和:after，从相同的元素中制作星形的其他形状。

对于第一个规则集，我们需要定义星形bottom-right、 和bottom-left边框的基色，并使用透明颜色值，就像在三角形中一样。为了确保你的星星是直立的，我们需要通过rotate(35deg)变换将形状旋转 25 度。

:before 伪类制作星星的顶部三角形。确保你提供的border-bottom颜色与你在父规则中提供的颜色相同。我们需要从形状的其余部分自由移动它，以便我们可以自定义顶部和左侧对齐。这就是为什么 position: absolute 在这里很重要。

最后，是时候制作对角线形状了。在这里，:after伪类会有所帮助。再次确保将位置设置为绝对位置并且旋转值在 -70 度左右。这将为你提供完美对齐的星星：

---

CSS提示和技巧：使用 CSS 截断文本

想象一下，如果你在一个容器中有很多文本，并且你只想显示其中的前两行，而其余的文本应该用椭圆 (...) 或任何其他符号剪掉。这该怎么做？好吧，这里我们需要text-overflow CSS 属性。假设我们想要这样的东西：（图略）

如你所见，“CLIPPED”演示中的第一行在其第二句中的文本一旦超过特定宽度时就会被截断。与“ELLIPSIS”演示相同，但​​在这里我们得到了额外的省略号以表示有更多的文本。

<div class="flex justify-center border-2 border-gray-200 p-4">
    <div class="demo-truncation">
    	<h4>CLIPPED</h4>
      <p class="clipped">
      	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet velit gravida odio ornare ultrices eu vitae elit. Suspendisse venenatis orci sed libero malesuada semper. Morbi et libero non purus faucibus elementum sed ut est. Cras volutpat at elit quis sagittis.
      </p>
      <h4>ELLIPSIS</h4>
      <p class="ellipsis">
      	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet velit gravida odio ornare ultrices eu vitae elit. Suspendisse venenatis orci sed libero malesuada semper. Morbi et libero non purus faucibus elementum sed ut est. Cras volutpat at elit quis sagittis.
      </p>
    </div>
</div>

div.demo-truncation {
	width: 100%;
}

p.clipped {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
}

p.ellipsis {
    white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

在 HTML 中，我们只是有一个容器来保存这两个文本元素。检查我们如何使用以下 CSS 行剪裁多余的两行。

为此，我们需要三件事。首先，我们设置整个容器元素的整体宽度即100%，然后在两段中，我们添加：

• white-space: nowrap ：这会折叠容器上的所有可用空白。
• 溢出：隐藏 ：为了适合填充框，它会剪辑里面的任何内容。这就是我们可以截断文本的原因。最后，我们可以使用两种类型的文本溢出属性，即剪辑和省略号，以获得所需的输出。

---

CSS常用的技巧有哪些：居中对齐 Flexbox

在 CSS 中使用flexbox的经典问题之一是如何将其中的内容居中对齐。无论是垂直的，水平的，还是两者兼而有之。假设我们希望上面制作的圆圈在网页上垂直和水平居中。

在这里，圆圈周围的边框向我们展示了网页的整个主体，而圆圈位于中心。

<div class="demo-center h-48">
  <div></div>
</div>

.demo-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo-center div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #b8b7cd;
}

首先，我们需要父容器来容纳圆，即 flex-container。在里面，我们有一个简单的 div 来制作圆圈。在 CSS 上，我们需要用到以下与 flexbox 相关的重要属性：

• display: flex; 这将父容器设置为具有 flexbox 布局。
• align-items: center; 这会将 flex 子项的对齐方式设置为横轴的中心。
• justify-content: center;这将 flex 子项的对齐方式设置为主轴的中心 。

之后，我们在本文中也有我们之前使用的常用圆 CSS 代码。由于现在圆圈垂直和水平居中，我们可以看到在任何屏幕尺寸下，它都保持居中。

居中，尤其是使用 CSS 使内容垂直居中，是一个非常吸引人的话题，所以我们写了整篇文章。要了解更多信息，请阅读我们的使用 CSS 垂直居中内容的指南。

---

CSS常用技巧合集：制作阴影

该阴影 属性允许我们到后台阴影效果添加到我们的形象。这使用了CSS 过滤器 属性。假设我们想要这个带有阴影的图像：

正如你在图像中看到的，我们在主图像后面有一个浅蓝色阴影。这可以通过以下方式完成：

img.demo-shadow {
    filter: drop-shadow(10px 10px 10px #A4BBFF);
}

只需一行 CSS 代码，你就可以在任何图像上添加阴影效果。它接受以下语法：

drop-shadow(offset-x offset-y blur-radius color)

因此，在我们的代码中，我们为图像提供了 10px 的水平偏移、垂直偏移和模糊半径，以及浅蓝色的十六进制颜色代码。

---

CSS提示和技巧：创建打字机效果

仅借助 CSS，就可以在文本上创建简单的打字机效果。这里我们需要澄清两件事；第一个是关于如何剪裁的文本部分，第二个是实际的打字机动画，它为我们提供了我们需要的整体效果，例如：这是打字机的效果！

<div class="demo-typewriter">
  <span>This is a typewriter effect!</span>
</div>

.demo-typewriter span {
  color: #262626;
  overflow: hidden;   
  border-right: .10em solid #FF8D8D;
  white-space: nowrap;   
  margin: 0 auto;   
  letter-spacing: .4rem;   
  animation: demo-typewriter 3s steps(30, end), demo-cursor 1s step-end infinite;
}
@keyframes demo-typewriter {
  from { 
    width: 0;
  }
  to { 
    width: 100%;
  }
}

@keyframes demo-cursor {
  from, to { 
    border-color: transparent; 
}
  50% { 
border-color: #FF8D8D; 
  }
}

让我们看看这里每行代码的含义：

1. 我们将整个文本与 body 标签上的 flexbox 居中对齐。
2. 接下来，在标题上，我们添加overflow: hidden以确保在动画完成之前不会显示句子的其余字母。
3. 为了使效果更逼真，我们添加了一个光标，这是通过使用该border-right属性来实现的。
4. 使用white-space 是为了使整个文本内容位于一行中，并且没有文本环绕其容器。
5. 接下来我们设置动画。我们有两个；打字机动画只是在 3 秒内将文本的整个宽度从 0 更改为 100%，而另一个光标动画则添加到我们在第 3 点制作的光标上。这将运行 1 秒，并将其边框颜色从透明更改为#FF8D8D。

---

CSS常用的技巧有哪些：使用 CSS 自定义属性（变量）

有时我们需要在多个位置或元素中使用一些 CSS 值。这些值可以在整个文档或整个 Web 项目中重复使用。

一个常见的例子是网站的品牌颜色。说它是#120078。现在我们需要将其应用于我们的链接标签、按钮、广告容器等。现在多个页面将具有相同的值。

所以为了不每次都使用它并更容易找到特定的固定值，我们使用 CSS 自定义属性。下面是一个简单的例子来展示这种情况：

:root {
  --brand-bg-color: #120078;
}

a  {
  color: white;
  background-color: var(--brand-bg-color);
}

.main-link {
  color: var(--brand-bg-color);
  padding: 3px;
}

这--brand-bg-color是我们在项目样式根部定义的 CSS 变量。它的值等于#120078。这意味着每当我们需要在任何链接、按钮等中使用这种特定颜色时，我们都可以简单地使用它，var(--brand-bg-color)而不是在任何地方手动定义它。当我们想要改变颜色时，它很有帮助。我们只是更新它的值，--brand-bg-color它反映在它被使用的每个元素上！

---

CSS提示和技巧总结

就是这样！这些都是前端开发人员在他们的代码中使用的所有常见东西。有时它是关于添加动画，而有时我们需要一个仅 CSS 艺术的阴影，如三角形和星星。

我希望这个CSS常用技巧合集对你有用，并确保将你的想法添加到这些 CSS 技巧中！