CSS（级联样式表）是网页设计中最流行的技术之一，允许开发人员创建视觉和响应式设计。作为一名 Web 开发人员，掌握 CSS 对于将您的设计愿景变为现实并确保在所有设备上提供良好的用户体验至关重要。以下是一些你可能不知道的 CSS 技巧：

1.新形态拟人：

Neumorphsime指软UI设计，是拟物化与扁平化设计相结合的流行设计趋势。这种风格使用阴影和高光来创造平滑的外观。下面是它的工作原理：

首先，我们创建一个微妙的背景：从 Neumotphsime 开始，选择浅灰色等柔和的背景颜色，

body {
  background-color: #eee;
  display: grid;
  place-content: center;
  height: 100vh;
}

然后我们创建一个具有这些样式的元素

.element {
  height: 100px;
  width: 100px;
  transition: all 0.2s linear;
  border-radius: 16px;
}

最后，我们在悬停时为元素添加一个盒子阴影

.element:hover {
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1), -10px -10px 10px white;
}

所以我们得到了这个漂亮的外观

你也可以做这个

只需向框阴影添加一个插图，如下所示

.element:hover {
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1) inset, -10px -10px 10px white inset;
}

2. Min() & Max() 和钳位():

这些工具使网站和应用程序更具动态性和响应能力。您可以使用这些函数来控制元素大小和调整大小。并在此处创建灵活的排版如何：

min() 函数可让您在此处设置列表中的最小值

前

.container {
  width:800px;
  max-width:90%;
}

后

.container{
  width: min(800px,90%);
}

max() 函数的工作原理与 min() 函数相同，但从列表中获取更大的值，如下所示：

.container{
  width: max(800px,90%);
}

有时你在一个容器中设置宽度以及最小和最大宽度，还有另一个名为clamp()的函数，这是它的工作原理

前

.container {
  width:50vw;
  min-width:400px;
  max-width:800px;
}

后

.container {
  width: clamp(400px,50vw,800px);
}

3. :Has() 和 :Not() 选择器：

:not() 选择器表示与选择器列表不匹配的元素

.container:not(:first-child) {
  background-color: blue;
}

如果作为参数传递给的任何相对选择器匹配，则 :has() 选择器表示一个元素

.container:has(svg) {
  padding: 20px;
}

4.文字渐变：

对于这个技巧，我们不能像这样直接为文本颜色添加渐变

.text{
  color: linear-gradient(to right, red,blue);
}

我们做什么

.text{
  background: linear-gradient(to right, red,blue);
  background-clip:text;
  color:transparent;
}

瞧，我们得到了这个很棒的效果

结论：

通过掌握这些 CSS 技术之一，您将把您的网页设计技能提升到新的高度。只需对这些技术进行一些小的调整，您就可以得到视觉上令人惊叹的结果，并使您的设计更加美观和用户友好。

您可以查看更多信息：https://designobit.com/