ro CSS 技巧会让你大吃一惊-css教程-PHP中文网

ro CSS 技巧会让你大吃一惊

WBOY

发布： 2024-07-17 05:05:09

原创

820 人浏览过

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

登录后复制

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

Image description

你也可以做这个

Image description

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

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

登录后复制

2. Min（）和Max（）和clamp（）：

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

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

登录后复制

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

Image description

结论：

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

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

以上是ro CSS 技巧会让你大吃一惊的详细内容。更多信息请关注PHP中文网其他相关文章！