其他属性

Kpsmart2025年3月4日大约 6 分钟

其他属性

其他不属于以上分类的 CSS 属性，包括滤镜、遮罩、混合模式、用户界面、内容生成等属性。

属性列表

下面是其他属性的完整列表，点击属性名可跳转到 MDN 文档查看详细信息。

滤镜和效果属性

属性名	描述	语法
filter	将滤镜效果应用于元素	`filter: none \| <filter-function-list>`
backdrop-filter	将滤镜效果应用于元素背后的区域	`backdrop-filter: none \| <filter-function-list>`
mask	使用图像作为元素的遮罩层	`mask: <mask-layer>#`
mask-image	设置元素的遮罩图像	`mask-image: none \| <image> \| <gradient>`
clip-path	创建一个裁剪区域，只显示元素的部分区域	`clip-path: <clip-source> \| [ <basic-shape> \|\| <geometry-box> ] \| none`
mix-blend-mode	指定元素内容如何与父元素内容和背景混合	`mix-blend-mode: <blend-mode>`
isolation	定义元素是否创建新的堆叠上下文	`isolation: auto \| isolate`

用户界面属性

属性名	描述	语法
cursor	设置鼠标指针的类型	`cursor: [ [ <url> [ <x> <y> ]? , ]* [ auto \| default \| none \| ... ] ]`
pointer-events	指定元素是否响应指针事件	`pointer-events: auto \| none \| visiblePainted \| visibleFill \| visibleStroke \| visible \| painted \| fill \| stroke \| all`
resize	定义元素是否可调整大小	`resize: none \| both \| horizontal \| vertical \| block \| inline`
user-select	控制用户能否选择文本	`user-select: auto \| text \| none \| contain \| all`
appearance	控制元素的原生外观	`appearance: none \| auto \| ...`
caret-color	设置插入光标的颜色	`caret-color: auto \| <color>`
scroll-behavior	指定滚动行为是平滑还是即时	`scroll-behavior: auto \| smooth`
scroll-snap-type	定义在滚动容器中的捕捉行为	`scroll-snap-type: none \| [ x \| y \| block \| inline \| both ] [ mandatory \| proximity ]?`
scroll-snap-align	指定滚动容器中的对齐位置	`scroll-snap-align: [ none \| start \| end \| center ]{1,2}`

内容生成属性

属性名	描述	语法
content	用于 ::before 和 ::after 伪元素，插入生成的内容	`content: normal \| none \| <content-list>`
counter-reset	重置 CSS 计数器	`counter-reset: [ <custom-ident> <integer>? ]+ \| none`
counter-increment	递增 CSS 计数器	`counter-increment: [ <custom-ident> <integer>? ]+ \| none`
counter-set	设置 CSS 计数器的值	`counter-set: [ <custom-ident> <integer>? ]+ \| none`
quotes	指定用于引号的符号	`quotes: none \| [ <string> <string> ]+`

列表属性

属性名	描述	语法
list-style	列表样式的简写属性	`list-style: <'list-style-type'> \|\| <'list-style-position'> \|\| <'list-style-image'>`
list-style-type	设置列表项标记的类型	`list-style-type: <counter-style> \| <string> \| none`
list-style-image	将图像设置为列表项标记	`list-style-image: <image> \| none`
list-style-position	指定列表项标记的位置	`list-style-position: inside \| outside`

打印和分页属性

属性名	描述	语法
page-break-before	设置元素前的分页行为	`page-break-before: auto \| always \| avoid \| left \| right \| recto \| verso`
page-break-after	设置元素后的分页行为	`page-break-after: auto \| always \| avoid \| left \| right \| recto \| verso`
page-break-inside	设置元素内的分页行为	`page-break-inside: auto \| avoid`
break-before	设置元素前的分页行为（新版）	`break-before: auto \| avoid \| avoid-page \| page \| left \| right \| recto \| verso \| avoid-column \| column \| avoid-region \| region`
break-after	设置元素后的分页行为（新版）	`break-after: auto \| avoid \| avoid-page \| page \| left \| right \| recto \| verso \| avoid-column \| column \| avoid-region \| region`
break-inside	设置元素内的分页行为（新版）	`break-inside: auto \| avoid \| avoid-page \| avoid-column \| avoid-region`

其他杂项属性

属性名	描述	语法
all	重置除 unicode-bidi 和 direction 之外的所有属性	`all: initial \| inherit \| unset \| revert \| revert-layer`
contain	指示元素及其内容尽可能独立于文档树的其余部分	`contain: none \| strict \| content \| [ size \|\| layout \|\| style \|\| paint ]`
object-fit	指定可替换元素的内容如何适应其使用的高度和宽度	`object-fit: fill \| contain \| cover \| none \| scale-down`
object-position	指定可替换元素的内容在其框内的对齐方式	`object-position: <position>`
will-change	向浏览器提示元素的哪些属性可能会发生变化	`will-change: auto \| <animatable-feature>`
image-rendering	提供浏览器关于图像缩放算法的提示	`image-rendering: auto \| crisp-edges \| pixelated`
touch-action	指定触摸屏用户如何操作元素的区域	`touch-action: auto \| none \| [ [ pan-x \| pan-left \| pan-right ] \|\| [ pan-y \| pan-up \| pan-down ] \|\| pinch-zoom ] \| manipulation`

使用示例

滤镜和效果示例

/* 基本滤镜效果 */
.blur-effect {
  filter: blur(5px);
}

.grayscale-effect {
  filter: grayscale(100%);
}

.multiple-filters {
  filter: brightness(1.2) contrast(120%) saturate(1.5) hue-rotate(45deg);
}

/* 背景模糊效果 */
.backdrop-blur {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
}

/* 裁剪路径 */
.clip-circle {
  clip-path: circle(50% at center);
}

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

/* 混合模式 */
.blend-multiply {
  mix-blend-mode: multiply;
}

/* 遮罩效果 */
.mask-image {
  mask-image: linear-gradient(to bottom, black, transparent);
}

用户界面示例

/* 自定义光标 */
.custom-cursor {
  cursor: url('path/to/cursor.png'), auto;
}

/* 禁用文本选择 */
.no-select {
  user-select: none;
}

/* 自定义滚动行为 */
.smooth-scroll {
  scroll-behavior: smooth;
}

/* 滚动捕捉 */
.scroll-container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 300px;
}

.scroll-item {
  scroll-snap-align: start;
  height: 300px;
}

/* 自定义调整大小 */
.resizable {
  resize: both;
  overflow: auto;
}

/* 移除表单元素默认样式 */
.custom-input {
  appearance: none;
  border: 2px solid #333;
  border-radius: 4px;
}

/* 自定义插入光标颜色 */
.custom-caret {
  caret-color: red;
}

内容生成示例

/* 使用伪元素添加内容 */
.quote::before {
  content: '"';
  font-size: 2em;
  color: #999;
}

.quote::after {
  content: '"';
  font-size: 2em;
  color: #999;
}

/* 使用属性值 */
.show-attr::after {
  content: " (" attr(href) ")";
}

/* 计数器 */
.toc {
  counter-reset: section;
}

.toc-item::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
  font-weight: bold;
}

/* 嵌套计数器 */
.nested-list {
  counter-reset: section;
}

.section {
  counter-reset: subsection;
}

.section::before {
  counter-increment: section;
  content: counter(section) ". ";
}

.subsection::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

列表样式示例

/* 基本列表样式 */
ul.custom-list {
  list-style: square inside url('bullet.png');
}

/* 分开设置 */
ol.numbered-list {
  list-style-type: decimal-leading-zero;
  list-style-position: outside;
}

/* 自定义列表标记 */
ul.emoji-list {
  list-style-type: "👉 ";
}

打印和分页示例

/* 打印样式 */
@media print {
  /* 在每个h1元素前分页 */
  h1 {
    break-before: page;
  }
  
  /* 避免在段落内分页 */
  p {
    break-inside: avoid;
  }
  
  /* 表格后总是分页 */
  table {
    break-after: page;
  }
  
  /* 隐藏打印时不需要的元素 */
  .no-print {
    display: none;
  }
}

其他杂项示例

/* 图像渲染方式 */
.pixel-art {
  image-rendering: pixelated;
}

/* 可替换元素的内容适应 */
.cover-image {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 300px;
}

/* 性能优化提示 */
.animated-element {
  will-change: transform, opacity;
}

/* 触摸操作控制 */
.map-container {
  touch-action: pan-x pan-y;
}

/* 重置所有属性 */
.reset-element {
  all: unset;
}

/* 包含优化 */
.contained-element {
  contain: content;
}

浏览器兼容性

大多数现代浏览器都支持这些属性，但有一些注意事项：

滤镜和效果属性（如 filter、backdrop-filter）在旧版浏览器中可能需要添加前缀或不支持
appearance 属性在不同浏览器中可能需要前缀（如 -webkit-appearance、-moz-appearance）
object-fit 和 object-position 在 IE 中不支持
一些较新的属性如 contain、will-change 在旧版浏览器中不支持
打印相关属性的支持度各不相同，建议在打印样式表中进行充分测试