关于前端:每个前端开发需要了解的15个强大的CSS属性

36次阅读

共计 4153 个字符,预计需要花费 11 分钟才能阅读完成。

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势,学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。

快来收费体验 ChatGpt plus 版本的,咱们出的钱 体验地址:https://chat.waixingyun.cn 能够退出网站底部技术群,一起找 bug,另外新版作图神器已上线 https://cube.waixingyun.cn/home

这篇文章介绍了 15 个重要的 CSS 属性,旨在进步读者的 CSS 常识和技能。文章以清晰的形式解释了每个属性的作用和用法,并提供了相应的示例代码。通过这篇文章,读者能够理解到一些乏味且实用的 CSS 属性。

:in-range 和:out-of-range 伪类

CSS 的 :in-range:out-of-range伪类用于款式化在指定范畴限度内和外的输出。

(a) :in-range

如果输出元素的以后值在 minmax 属性的范畴之间,那么它就处于范畴内。

这个伪类能够不便地确定字段的以后值是否可承受。

(b) :out-of-range

如果输出元素的以后值超出了 minmax属性的范畴,那么它就是超出范围的。

它给用户一个视觉批示,通知他们字段值是否超出了范畴。

/* in-range */
input:in-range{background-color: rgba(0, 255, 0, 0.25);
}
/* out-of-range */
input:out-of-range{background-color: rgba(255, 0, 0, 0.25);
}

留神:这些伪类只实用于具备范畴限度的元素,没有这个限度,元素就无奈处于范畴内或范畴外。

相干文档:https://developer.mozilla.org/en-US/docs/Web/CSS/:in-range

2. grayscale() 函数

如果应用 0100%之间的值,能够创立不同的成果。较低的值将保留一些色彩,而较高的值将使图像更靠近黑白。

这种图像成果能够通过 CSS 的滤镜属性实现。通过将图像的 filter 属性设置为 grayscale(100%),能够将图像齐全转换为黑白。要创立不同的成果,能够尝试不同的grayscale 值,例如 grayscale(50%) 将使图像出现一种半色调成果。

应用 CSS 的图像转换成果,能够通过调整值来轻松地将彩色图像转换为黑白,并实现各种不同的成果。

.grayscale-image{filter: grayscale(100%);
}

3. 玻璃成果

咱们能够应用几行代码实现一个玻璃成果。玻璃成果十分漂亮,能够为咱们的设计削减优雅。

Glass.CSS 是最受欢迎的玻璃成果生成器,咱们能够收费为我的项目创立 CSS 玻璃成果。只须要依据您的需要调整一些设置,并将 CSS 代码复制粘贴到您的我的项目中即可。

.glass-effect{-webkit-backdrop-filter: blur(6.2px);
   backdrop-filter: blur(6.2px);
   background: rgba(255, 255, 255, 0.4);
   border-radius: 16px;
   border: 1px solid rgba(255, 255, 255, 0.24); 
}

4. 应用以下 CSS 代码来款式化文本

这些是一些每个人都应该晓得的十分根本的文本款式技巧。然而,还有许多其余高级选项可供选择。

p{
  font-family: Helvetica, Arial, sans-serif;
  font-size: 5rem;
  text-transform: capitalize;
  text-shadow: 2px 2px 2px pink, 1px 1px 2px pink;
  text-align: center;
  font-weight: normal;
  line-height: 1.6;
  letter-spacing: 2px;
}

5.clamp() 函数

CSS 的 clamp() 函数将一个值限度在两个上下界之间。必须有一个首选值、一个最小值和一个最大值。

当字体大小依据视口变动时,clamp() 会派上用场。

p{font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}

6. 居中一个 div

开发者最重要的工作之一是将一个 div 居中。有很多其余的选项能够实现 div 的居中。在这个例子中,咱们应用 CSS 的 flexbox 来实现 div 的程度和垂直居中。

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

7. CSS 线性突变

要创立一个突变的 CSS 线性突变,只需应用上面的 CSS 代码。

div {background: linear-gradient(35deg, #CCFFFF, #FFCCCC, rgb(204, 204, 255));
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin: 50px auto;
  }

8. CSS 抖动成果

这个“摇摆”动画成果会在用户输出有效内容时晃动输入框。它简略而优雅。例如,如果用户在文本框中输出数字而不是字母,输入框将会摇摆。

<input id="name" type="text" placeholder="Enter your name" pattern="[A-Za-z]*"/>
input:invalid{
      animation: shake 0.2s ease-in-out 0s 2;
      box-shadow: 0 0 0.4em red;
}
  @keyframes shake {0% { margin-left: 0rem;}
      25% {margin-left: 0.5rem;}
      75% {margin-left: -0.5rem;}
      100% {margin-left: 0rem;}
}

9. 文本溢出

能够应用此属性来截断溢出的文本。它能够被裁剪并显示为省略号 (...) 或自定义字符串。

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  width: 200px;
 }
div.text {
  white-space: nowrap; 
  width: 200px; 
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #000000;
}  
div.text:hover {overflow: visible;}

10. ‘column-count’ 属性

它指定了一个元素应该被分成的列数。

p{column-count: 2;}

11. CSS 动画

动画逐步扭转元素的款式。只有在指定关键帧之后能力应用。关键帧形容了动画序列中特定点上动画元素的外观。

div{
  width: 200px;
  height: 200px;
  background-color: blue;
  animation-name: square;
  animation-duration: 8s;
}
@keyframes square{from {background-color: blue;}
  to {background-color: black;}
}

12. 暗影成果

应用 CSS,咱们能够为文本和元素增加成果。将属性定义为 text-shadowbox-shadow。应用 text-shadow 为文本增加暗影,应用 box-shadow 为元素增加暗影。

(i) text-shadow: It gives the text a shadow.
(i) text-shadow: 它给文本增加了暗影。

h1{
  color: blue;
  text-shadow: 2px 2px 4px #000000;
}

box-shadow:用于给元素增加暗影成果。上面的示例中,理论的 div 元素是紫色的,盒子暗影是天蓝色的,并且设置在右下方 10 像素处。

div{
  width: 200px;
  height: 200px;
  padding: 15px;
  background-color: purple;
  box-shadow: 10px 10px skyblue;
}

13. CSS 剪裁

应用 clip-path 属性,您能够仅显示元素的一部分,同时暗藏其余部分。


.bg{
  height: 100%;
  width: 100%;
  background-color: rgba(199, 62, 133, 0.9);
  clip-path: polygon(100% 0, 100% 0, 100% 51%, 0 100%, 0 90%, 0 52%, 0 51%);
  position: absolute;
}

14.CSS 背景混合模式属性

该属性形容了背景色彩和图像(或两个图像)的混合形式。一个与每个背景图像对应的混合模式列表组成了该值。混合模式指定了背景图层如何混合(色彩或图片)。

能够应用 background-blend-mode 属性创立令人惊艳的背景。

div{
   width: 600px;
   height: 400px;
   background-repeat: no-repeat, repeat;
   background-position: center;
   background-image: url("flower.png"), url("background-image.png");
   background-blend-mode: color;
}

15. 色相旋转动画

还有其余一些选项可供选择。如果你想理解更多对于这个属性的信息,请在 W3Schools 上查看。

能够在网站的次要局部和按钮上增加色相旋转动画。例如,天气预报网站的次要局部将因而而变得令人惊艳。

button {background: linear-gradient(35deg, #8C52FF, #C669FF);
  animation: hue-rotate 3s linear infinite alternate;
}
@keyframes hue-rotate {
  to {filter: hue-rotate(85deg);
 }
}

交换

有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。

正文完
 0