跳至主要內容

图形函数

Kpsmart2025年3月4日大约 6 分钟

图形函数

CSS 图形函数用于创建各种视觉效果，如渐变、图像处理和形状生成等，可以丰富网页的视觉表现力，减少对外部图像资源的依赖。

函数列表

下面是图形函数的完整列表，点击函数名可跳转到 MDN 文档查看详细信息。

函数名描述语法
linear-gradient()创建线性渐变linear-gradient([角度,] 颜色1, 颜色2, ...)
radial-gradient()创建径向渐变radial-gradient([形状 大小 at 位置,] 颜色1, 颜色2, ...)
conic-gradient()创建锥形渐变conic-gradient([from 角度] [at 位置,] 颜色1, 颜色2, ...)
repeating-linear-gradient()创建重复的线性渐变repeating-linear-gradient([角度,] 颜色1 位置1, 颜色2 位置2, ...)
repeating-radial-gradient()创建重复的径向渐变repeating-radial-gradient([形状 大小 at 位置,] 颜色1 位置1, 颜色2 位置2, ...)
repeating-conic-gradient()创建重复的锥形渐变repeating-conic-gradient([from 角度] [at 位置,] 颜色1 位置1, 颜色2 位置2, ...)
url()引用外部资源url(资源路径)
image()定义图像资源image(资源)
image-set()根据设备分辨率提供不同图像image-set(url(图像1) 分辨率1, url(图像2) 分辨率2, ...)
cross-fade()混合两个或多个图像cross-fade(图像1, 图像2, 百分比)
element()使用页面中的元素作为图像element(#元素ID)
paint()使用 CSS Painting API 创建自定义图像paint(工作名称, 参数1, 参数2, ...)
mask-image()创建遮罩图像mask-image(图像)
filter()应用图像滤镜效果filter(滤镜函数)
backdrop-filter()对元素背后的区域应用滤镜效果backdrop-filter(滤镜函数)
clip-path()创建裁剪路径clip-path(形状函数)

渐变函数详解

线性渐变

线性渐变沿着直线方向从一种颜色过渡到另一种颜色。

/* 基本用法 - 从上到下 */
.gradient-top-bottom {
  background: linear-gradient(red, blue);
}

/* 指定方向 - 从左到右 */
.gradient-left-right {
  background: linear-gradient(to right, red, blue);
}

/* 指定角度 - 45度角 */
.gradient-angle {
  background: linear-gradient(45deg, red, blue);
}

/* 多色渐变 */
.gradient-multi-color {
  background: linear-gradient(red, yellow, green, blue);
}

/* 指定颜色位置 */
.gradient-color-stops {
  background: linear-gradient(to right, red 20%, yellow 40%, green 60%, blue 80%);
}

/* 透明渐变 - 用于淡出效果 */
.gradient-transparent {
  background: linear-gradient(to right, rgba(255, 0, 0, 1), rgba(255, 0, 0, 0));
}

径向渐变

径向渐变从一个点向四周扩散，形成圆形或椭圆形的渐变效果。

/* 基本用法 - 默认椭圆形 */
.radial-default {
  background: radial-gradient(red, blue);
}

/* 指定形状 - 圆形 */
.radial-circle {
  background: radial-gradient(circle, red, blue);
}

/* 指定大小 */
.radial-size {
  background: radial-gradient(circle closest-side, red, blue);
}

/* 指定位置 */
.radial-position {
  background: radial-gradient(circle at top right, red, blue);
}

/* 完整语法 */
.radial-complete {
  background: radial-gradient(circle closest-corner at 20% 30%, red, yellow, blue);
}

锥形渐变

锥形渐变围绕一个中心点旋转，类似于色轮。

/* 基本用法 */
.conic-default {
  background: conic-gradient(red, yellow, green, blue, purple, red);
}

/* 指定起始角度 */
.conic-from {
  background: conic-gradient(from 45deg, red, yellow, green, blue);
}

/* 指定中心点 */
.conic-at {
  background: conic-gradient(at 70% 30%, red, yellow, green, blue);
}

/* 指定颜色位置 */
.conic-color-stops {
  background: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
}

/* 创建饼图 */
.conic-pie-chart {
  background: conic-gradient(red 0, red 30%, yellow 30%, yellow 65%, green 65%, green 100%);
  border-radius: 50%;
}

重复渐变

重复渐变函数可以创建重复的渐变图案。

/* 重复线性渐变 */
.repeating-linear {
  background: repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px);
}

/* 重复径向渐变 */
.repeating-radial {
  background: repeating-radial-gradient(circle, red, red 10px, blue 10px, blue 20px);
}

/* 重复锥形渐变 */
.repeating-conic {
  background: repeating-conic-gradient(red 0deg, red 15deg, blue 15deg, blue 30deg);
}

图像处理函数

url() 和 image-set()

/* 基本背景图像 */
.background-image {
  background-image: url('image.jpg');
}

/* 响应式图像 */
.responsive-image {
  background-image: image-set(
    url('image-1x.jpg') 1x,
    url('image-2x.jpg') 2x,
    url('image-3x.jpg') 3x
  );
}

cross-fade()

/* 混合两个图像 */
.cross-fade-images {
  background-image: cross-fade(url('image1.jpg'), url('image2.jpg'), 50%);
}

element()

/* 使用页面元素作为背景 */
.element-as-background {
  background-image: element(#source-element);
}

滤镜函数

/* 基本滤镜 */
.filtered-image {
  filter: blur(5px) brightness(1.2) contrast(1.4);
}

/* 背景滤镜 */
.backdrop-filtered {
  backdrop-filter: blur(10px) brightness(0.8);
}

裁剪路径

/* 基本形状裁剪 */
.clipped-circle {
  clip-path: circle(50% at center);
}

.clipped-polygon {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.clipped-ellipse {
  clip-path: ellipse(25% 40% at 50% 50%);
}

.clipped-inset {
  clip-path: inset(10% 20% 30% 10% round 10px);
}

常见应用场景

创建渐变按钮

.gradient-button {
  background: linear-gradient(to right, #4facfe, #00f2fe);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.gradient-button:hover {
  background: linear-gradient(to right, #00f2fe, #4facfe);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 242, 254, 0.4);
}

创建图案背景

.striped-background {
  background: repeating-linear-gradient(
    45deg,
    #f5f5f5,
    #f5f5f5 10px,
    #e0e0e0 10px,
    #e0e0e0 20px
  );
}

.checkerboard {
  background: repeating-conic-gradient(
    #f5f5f5 0% 25%,
    #e0e0e0 25% 50%,
    #f5f5f5 50% 75%,
    #e0e0e0 75% 100%
  ) 50% / 20px 20px;
}

创建形状

.circle {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, #ff5f6d, #ffc371);
  border-radius: 50%;
}

.diamond {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #43cea2, #185a9d);
  transform: rotate(45deg);
}

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #3494e6;
}

.custom-shape {
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, #ff9966, #ff5e62);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

浏览器兼容性

函数ChromeFirefoxSafariEdge
linear-gradient()26+16+6.1+12+
radial-gradient()26+16+6.1+12+
conic-gradient()69+83+12.1+79+
repeating-linear-gradient()26+16+6.1+12+
repeating-radial-gradient()26+16+6.1+12+
repeating-conic-gradient()69+83+12.1+79+
url()1+1+1+12+
image-set()21+ (带前缀)88+6+ (带前缀)79+
cross-fade()96+88+15.4+96+
element()不支持4+ (带前缀)不支持不支持
paint()65+不支持不支持79+
filter()53+35+9.1+12+
backdrop-filter()76+70+9+17+
clip-path()55+54+9.1+12+

注意事项

  1. 性能考虑：复杂的渐变和滤镜可能会影响性能，特别是在移动设备上。
  2. 兼容性：某些新功能（如 paint()、element()）的浏览器支持有限。
  3. 前缀：某些函数可能需要添加浏览器前缀（如 -webkit-、-moz-）以提高兼容性。
  4. 回退方案：始终为不支持这些函数的浏览器提供回退样式。

相关资源