css一些不常见但很有用的属性操作大全

一、介绍

在 CSS（层叠样式表）中，有一些不常用但很实用的属性，这些属性可以帮助我们更好地控制网页的样式。本篇文章会介绍一些不常见但很有用的属性操作，帮助你更好地掌握 CSS。

二、属性列表

1. “box-shadow”属性

“box-shadow”属性可以为一个元素添加阴影。

例如：

div {
  box-shadow: 2px 2px 5px #888888;
}

上面的代码会让 <div> 元素有一个阴影，阴影的偏移量是2px，其模糊半径为5px，颜色为#888888。

2. “text-overflow”属性

“text-overflow”属性可以让文本溢出时进行省略号处理。

例如：

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

上面的代码会让 `` 元素中的文本溢出时进行省略号处理。

3. “text-transform”属性

“text-transform”属性可以让文本转化为大写、小写或首字母大写等形式。

例如：

p.uppercase {
  text-transform: uppercase;
}
p.lowercase {
  text-transform: lowercase;
}
p.capitalize {
  text-transform: capitalize;
}

上面的代码会让 `` 元素分别变为大写、小写或首字母大写形式。

4. “word-wrap”属性

“word-wrap”属性可以让长单词或 URL 在不溢出容器的情况下自动换行。

例如：

p {
  word-wrap: break-word;
}

上面的代码会让 `` 元素中的文字在不溢出容器的情况下进行自动换行。

5. “transform”属性

“transform”属性可以对元素进行旋转、缩放、倾斜等变换操作。

例如：

div {
  transform: rotate(45deg);
}

上面的代码会让 <div> 元素进行45度旋转。

6. “text-shadow”属性

“text-shadow”属性可以为文本添加阴影。

例如：

h1 {
  text-shadow: 2px 2px #888888;
}

7. “column-count”属性

“column-count”属性可以让文本内容自动分栏。

例如：

p {
  column-count: 2;
}

上面的代码会让 `` 元素的文本内容自动分成两栏显示。

8. “pointer-events”属性

“pointer-events”属性可以控制元素是否响应鼠标事件。

例如：

div {
  pointer-events: none;
}

上面的代码会让 <div> 元素不响应鼠标事件。

三、总结

以上就是一些不常见但很有用的 CSS 属性操作。希望这篇文章能够帮助你更好地掌握 CSS，让你的网页更加炫酷。