[分享]css3指标详解

CSS3是CSS的升级版，包括许多新的指标和功能。下面来详细介绍CSS3中常用的指标。

1. Border-radius:

.box {
  border-radius: 10px;
} 

这个指标用于为元素的边框添加圆角。默认值为0px，可以通过设置一个值来使所有四个角都有相同的圆角，也可以分别为每个角单独设置值。

2. Box-shadow:

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

这个指标用于为元素添加阴影效果。可以指定阴影的位置、模糊度、扩张半径和颜色。

3. Gradient:

.box {
  background: linear-gradient(#ffffff, #000000);
} 

这个指标用于为元素添加渐变背景。可以指定线性渐变或径向渐变，以及渐变的起始和结束颜色。

4. Transition:

.box {
  transition: all 0.3s ease-in-out;
}
.box:hover {
  transform: scale(1.2);
} 

这个指标用于为元素添加过渡效果。可以指定从一个状态到另一个状态的过渡时间、延迟时间和过渡方式。

5. Flexbox:

.wrapper {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex-grow: 1;
  flex-basis: 25%;
} 

这个指标用于实现弹性布局，可以方便地实现元素的对齐、分布、自适应等效果。