CSS小知识，分享14个你可能还未用上但又实用的CSS属性（下）

大家好，在上一篇文章里 CSS小知识，分享14个你可能还未用上但又实用的CSS属性（上）我们一起学习了上半部分，这篇文章我们我们继续学习下半部分。

创新互联是少有的成都网站建设、做网站、营销型企业网站、小程序开发、手机APP,开发、制作、设计、买链接、推广优化一站式服务网络公司,从2013年创立,坚持透明化,价格低,无套路经营理念。让网页惊喜每一位访客多年来深受用户好评

八、CSS Shake Effect 晃动效果

CSS Shake Effect 是一种使用 CSS 制作的晃动效果。这种效果通常用于错误提类似的场景。

如下段代码所示，当用户输入无效输入时，此“摇动”动画效果会摇动输入字段。它简单而优雅。例如，如果用户在文本字段中输入数字而不是字母，输入字段将会抖动。

HTML部分

CSS部分

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

九、Text Overflow 文字溢出

您可以使用此属性截断溢出的文本。指在文本超出元素宽度时，自动隐藏超出部分的文本。在 CSS 中，可以使用 text-overflow 属性来实现这种效果。可以使用省略号 (...) 或自定义字符串对其进行截取缩略显示。

下面是一个简单的代码示例：

.overflow-ellipsis {
  width: 100px; /* 定义元素的宽度 */
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 添加省略号来指示隐藏的文本 */
}

HTML:

文本如果超出容器会被截断并添加省略号

上面的代码定义了一个名为 "overflow-ellipsis" 的类，并将其应用于一个元素。这个类使用了 white-space: nowrap; 来防止文本换行，使用了 overflow: hidden; 来隐藏超出部分，并使用了 text-overflow: ellipsis; 来添加省略号（...）来指示隐藏的文本。

十、column-count 内容多列属性

CSS 的 column-count 属性可以用来将一个元素的内容分成多列，以实现报纸或杂志的页面布局效果。

下面是一个简单的代码示例：

.multi-column {
  column-count: 2; /* 将内容分成两列 */
  column-gap: 20px; /* 设置列之间的间隔 */
}

HTML:

  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, augue non tincidunt eleifend, magna massa varius lorem, at luctus augue tellus in nibh.
  
Proin velit orci, pellentesque vel malesuada at, varius vel nibh. Nam eget mauris euismod, feugiat ipsum a, convallis enim. Aenean euismod malesuada orci eget euismod.
  
Nunc vitae augue eget nulla tempus aliquet. Integer euismod quam nunc, id rhoncus magna convallis at. Nullam euismod, sem a bibendum malesuada, erat ligula molestie magna.

上面的代码定义了一个名为 "multi-column" 的类，并将其应用于一个元素。这个类使用了 column-count: 2; 来将内容分成两列，并使用了 column-gap: 20px; 来设置列之间的间隔。

还有 column-width 属性可以用来设置每一列的宽度，若同时设置 column-width 和 column-count 属性，则优先使用 column-width，column-count 会自动调整。

在实际使用中，需要结合其他属性，如 column-gap, column-rule, column-rule-color, column-rule-style, column-rule-width等等来实现多列布局的效果。

十一、CSS Animations 动画

动画逐渐改变元素的样式。只有先指定关键帧才能使用它。关键帧描述动画元素如何出现在动画序列中的等相关特性。

示例代码：

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

十二、Shadow Effects 阴影效果

text-shadow 属性可以在文本上添加阴影效果，可以使用它来增强文本的可读性和吸引力。

box-shadow 属性可以在元素上添加阴影效果，可以使用它来增强元素的立体感和吸引力。

下面是 text-shadow 和 box-shadow 的一个简单的代码示例：

.text-shadow {
  text-shadow: 2px 2px 4px #000000; /* x-offset, y-offset, blur-radius, color */
}

.box-shadow {
  box-shadow: 2px 2px 4px #000000; /* x-offset, y-offset, blur-radius, color */
}

HTML代码

This is text with shadow
This is a box with shadow

上面的代码定义了一个名为 "text-shadow" 的类和一个名为 "box-shadow" 的类，分别将其应用于一个文本元素和一个盒子元素。这两个类都使用了 x-offset: 2px; y-offset: 2px; blur-radius: 4px; color: #000000; 来定义阴影的样式。

阴影的偏移值(x-offset y-offset)可以正值或负值，正值为阴影在元素的下方右方，负值为阴影在元素的上方左方。阴影的模糊半径和阴影的颜色也可以根据需要调整。

在实际使用中，还可以使用 box-shadow: inset; 属性来改变阴影为内阴影。

十三、CSS Clipping

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

https://bennettfeely.com/clippy/ 这个工具网站，是一种通过将元素剪辑为基本形状（圆形、椭圆形、多边形或插图）的可视化在线代码生成工具，大大节省的你的时间。

十四、CSS background-blend-mode 属性

background-blend-mode 属性可以用来控制背景图像与背景颜色的混合模式。它可以使用一系列的混合模式来定义背景的外观，如添加颜色、阴影、高光等。

您可以使用 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;
}

完成后的效果：

background-blend-mode 属性有很多可用的值，如：normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity。

在实际使用中，需要注意浏览器的兼容性问题，需要使用前请查询浏览器对 background-blend-mode 的支持情况。更多相关的用法建议查询
https://www.w3schools.com/cssref/pr_background-blend-mode.php 这个网站。

结束

今天的分享就到这里，14 个关于CSS的属性就分享到这里，希望对你有所帮助。

分享名称：CSS小知识，分享14个你可能还未用上但又实用的CSS属性（下）
分享网址：http://www.shufengxianlan.com/qtweb/news40/58740.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联