ro CSS 技巧会让你大吃一惊

class strong pre div 883 来源： 2024-10-23

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(null, 0, 0, 0.1), -10px -10px 10px white;
}

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

你也可以做这个

立即学习“前端免费学习笔记（深入）”；

image description

只需像这样向框阴影添加一个插图

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

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

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);
}

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

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

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

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

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

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

我们做什么

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

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

image description

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

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