css3新增属性

/* 示例代码：使用CSS3新增的box-shadow属性为元素添加阴影效果 */

.box {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  box-shadow: 10px 10px 5px grey; /* 水平偏移量 垂直偏移量 模糊半径 阴影颜色 */
}

/* 解释说明：
- box-shadow 是 CSS3 新增的属性，用于给元素添加阴影效果。
- 第一个值 (10px) 表示水平偏移量，正值向右偏移，负值向左偏移。
- 第二个值 (10px) 表示垂直偏移量，正值向下偏移，负值向上偏移。
- 第三个值 (5px) 表示模糊半径，值越大阴影越模糊。
- 最后一个值 (grey) 表示阴影的颜色。
*/

/* 示例代码：使用CSS3新增的border-radius属性为元素添加圆角效果 */

.rounded-box {
  width: 200px;
  height: 100px;
  background-color: lightcoral;
  border-radius: 25px; /* 四个角的圆角半径 */
}

/* 解释说明：
- border-radius 是 CSS3 新增的属性，用于给元素的边框添加圆角效果。
- 可以设置一个值，表示四个角的圆角半径相同；也可以分别设置四个值，依次表示左上角、右上角、右下角和左下角的圆角半径。
*/

/* 示例代码：使用CSS3新增的transform属性对元素进行变换 */

.transformed-box {
  width: 200px;
  height: 100px;
  background-color: lightgreen;
  transform: rotate(45deg); /* 旋转元素45度 */
}

/* 解释说明：
- transform 是 CSS3 新增的属性，用于对元素进行变形操作，如旋转、缩放、倾斜和平移。
- rotate() 函数用于旋转元素，参数为旋转的角度（单位可以是 deg 表示度数）。
*/