web蓝桥杯备考（css3新特性）1、选择器属性选择器：[attr=value]、[attr^=value]（以某值开

1、选择器

属性选择器：[attr=value]、[attr^=value]（以某值开头）、[attr$=value]（以某值结尾）等。
伪类选择器：:nth-child(n)、:nth-of-type(n)、:not() 等815。
伪元素选择器：::selection（选中文本的样式）。

示例：

/* 选择所有偶数行的表格行 */
tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* 选择非 .textinput 类的元素 */
:not(.textinput) {
  font-size: 12px;
}

2、视觉效果增强

圆角：border-radius，支持单个或多个值。
阴影：box-shadow（盒子阴影）和 text-shadow（文字阴影）。
渐变：linear-gradient（线性渐变）和 radial-gradient（径向渐变）。

示例：

/* 圆角 */
div {
  border-radius: 10px;
}

/* 盒子阴影 */
div {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

/* 线性渐变背景 */
div {
  background: linear-gradient(to right, red, yellow);
}

3、背景与边框

多背景：支持多个背景图像。
背景裁剪：background-clip（控制背景绘制区域）。
边框图片：border-image，用图片作为边框。

示例：

/* 多背景 */
div {
  background: url(image1.png) no-repeat, url(image2.png) no-repeat;
}

/* 背景裁剪 */
div {
  background-clip: content-box;
}

/* 边框图片 */
div {
  border-image: url(border.png) 30 round;
}

4、文本效果

文本阴影：text-shadow。
文本溢出：text-overflow: ellipsis（显示省略号）。
自动换行：word-wrap: break-word（长单词换行）。

示例：

/* 文本阴影 */
h1 {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

/* 单行文本溢出省略 */
p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

5、变换、动画与过渡

2D 变换：transform（旋转、缩放、平移、倾斜）。
3D 变换：rotateX()、rotateY() 等。
动画：@keyframes 和 animation 属性。

示例：

/* 2D 旋转 */
div {
  transform: rotate(45deg);
}

/* 动画 */
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}
div {
  animation: slide 2s infinite;
}

过渡：

transition-property：指定需要过渡的 CSS 属性（如 width、height、background-color 等）。
transition-duration：定义过渡的持续时间（如 1s、500ms）。
transition-timing-function：定义过渡的速度曲线（如 ease、linear、ease-in-out）。
transition-delay：定义过渡开始前的延迟时间（如 0.5s）。

注意： 可以简写为

transition: property duration timing-function delay;

示例：

改变背景颜色（鼠标悬停时，背景颜色从红色渐变到蓝色）

.box {
      width: 100px;
      height: 100px;
      background-color: red;
      transition: background-color 1s ease;
    }
    .box:hover {
      background-color: blue;
    }

改变宽度和高度（鼠标悬停时，元素的宽度和高度同时变化）

.box {
  width: 100px;
  height: 100px;
  background-color: green;
  transition: width 1s ease, height 1s ease;
}
.box:hover {
  width: 200px;
  height: 200px;
}

延迟过渡（设置过渡延迟0.5秒后开始）

.box {
  width: 100px;
  height: 100px;
  background-color: orange;
  transition: width 1s ease 0.5s;
}
.box:hover {
  width: 200px;
}

多个属性过渡（背景颜色、宽度、高度）

.box {
  width: 100px;
  height: 100px;
  background-color: purple;
  transition: background-color 1s ease, width 1s ease, height 1s ease;
}
.box:hover {
  background-color: yellow;
  width: 200px;
  height: 200px;
}

注意：

支持的属性：并非所有 CSS 属性都支持过渡，例如 display 属性不支持过渡。
性能优化：过渡 transform 和 opacity 属性性能较好，适合用于动画效果。
兼容性：CSS3 过渡在现代浏览器中支持良好，但在旧版浏览器（如 IE9 及以下）中可能不支持。

过渡与动画的区别：

过渡（Transition） ：需要触发条件（如 :hover、:focus），适合简单的状态变化。
动画（Animation） ：通过 @keyframes 定义，可以自动播放，适合复杂的动画效果。

6、颜色与透明度

RGBA/HSLA：支持透明度。
透明度：opacity 属性。

示例：

/* RGBA 颜色 */
div {
  background-color: rgba(255, 0, 0, 0.5);
}
/* 透明度 */
div {
  opacity: 0.8;
}

7、响应式设计

视口单位：vw（视口宽度百分比，1vm=视口宽度的1%）、vh（视口高度百分比，1vh=视口高度的1%)、vmin（视口宽度和高度中较小值的百分比）、vmax（视口宽度和高度中较大值的百分比）
多列布局：columns 属性实现文本分栏显示，column-count（指定列数）、column-width（指定每列的宽度）、column-gap（设置列之间的间距）、column-rule（设置列之间的分隔线）
响应式多列布局：

.multi-column {
  column-count: 1; /* 默认 1 列 */
  column-gap: 20px;
}
@media (min-width: 600px) {
  .multi-column {
    column-count: 2; /* 屏幕宽度大于 600px 时显示 2 列 */
  }
}
@media (min-width: 900px) {
  .multi-column {
    column-count: 3; /* 屏幕宽度大于 900px 时显示 3 列 */
  }
}