CSS3新增了哪些新特性?

最新推荐文章于 2025-03-23 23:28:04 发布

让你五行代码

最新推荐文章于 2025-03-23 23:28:04 发布

阅读量419

点赞数

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/zy1992As/article/details/129667409

版权

做web前端的同学们都知道CSS3引入了许多新的特性，包括：

　　1.Border-radius：设置元素的圆角边框。

.box {
  border-radius: 10px;
}

　　2.Box-shadow：在元素周围添加阴影效果。

.box {
  box-shadow: 5px 5px 5px #888888;
}

　　3.Text-shadow：在文本周围添加阴影效果。

h1 {
  text-shadow: 2px 2px 2px #888888;
}

　　4.RGBA：使用RGB颜色模型和alpha通道来定义颜色。

.box {
  background-color: rgba(255, 0, 0, 0.5);
}

　　5.Opacity：设置元素的透明度。

.box {
  opacity: 0.5;
}

　　6.Transform：设置元素的旋转、缩放、倾斜等变换效果。

.box {
  transform: rotate(45deg);
}

　　7.Transition：设置元素在状态改变时的平滑过渡效果。

.box {
  transition: all 0.5s ease-in-out;
}

.box:hover {
  transform: scale(1.2);
}

　　8.Flexbox布局：一种用于灵活布局的新模型，可以让容器的子元素自适应空间大小。

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

.item {
  flex: 1;
}

　　9.Grid布局：另一种用于网格布局的新模型，可以在二维平面上对元素进行布局。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  gap: 10px;
}

.item {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

　　10.@keyframes动画：用于创建CSS动画的新属性，可以在不同的关键帧上设置CSS属性的值。

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.box {
  animation: slide-in 1s ease-in-out;
}

　　11.Custom属性：可以定义自定义CSS属性，并在整个文档中重复使用。

:root {
  --primary-color: #f00;
  --secondary-color: #0f0;
}

.box {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

　　12.过滤器：可以对元素的颜色、亮度、对比度、饱和度等进行调整。

.box {
  filter: brightness(50%);
}

　　这些是CSS3中的一些其他新特性和示例代码。CSS3的新特性大大提升了网页设计的灵活性和可扩展性，使得开发人员可以更轻松地实现各种效果和布局。