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

看，我们得到了这个伟大的结果

结论：掌握其中一个 css 技术，你将把你的网页设计技能提升到一个新的高度。只要对这些技术做一些小的调整，就能带来惊人的视觉效果，让你的设计更加美观友好。

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

以上是ro CSS 技巧会让你大吃一惊的详细内容，请多关注其他相关文章！

最新文章

相关文章