简单但很实用的5个css属性

下面是详细讲解“简单但很实用的5个CSS属性”的完整攻略：

1. 文字截断（text-overflow）

有时候，我们需要限制文字的长度，同时想要显示省略号 (...) 来表示截断。这个时候，可以使用 text-overflow 属性。

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

上面的代码中，我们使用了三个属性，分别是 text-overflow、white-space 和 overflow。其中 text-overflow 属性用来控制省略号的显示，可以设置为 ellipsis（省略号）、clip（截断）或者字符串，其他两个属性用来控制文本的显示方式和溢出内容的处理。

以下是示例代码，截断长度为 80 个字符：

p {
  width: 200px;
  border: 1px solid #ccc;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

2. 弹性布局（flexbox）

弹性布局是一个非常实用的 CSS 属性，可以用来快速而方便地完成自适应的页面布局。使用弹性布局，我们可以轻松地对齐、分配空间和调整项的大小等。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

上面的代码中，我们使用了三个属性，分别是 display、justify-content 和 align-items。其中 display 属性用来将容器转化为一个 flexbox 容器，其他两个属性则用来设置主轴和侧轴的对齐方式。

以下是示例代码，将容器内的子元素垂直居中：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container div {
  height: 50px;
  width: 50px;
  background-color: #ccc;
}

3. 盒子阴影（box-shadow）

盒子阴影是一个简单但是非常实用的属性，可以为页面元素增加阴影效果，让它们看起来更加立体和生动。

box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);

上面的代码中，我们使用了一个属性，即 box-shadow，用来设置阴影的颜色、水平偏移量、垂直偏移量、模糊半径和扩散半径。

以下是示例代码，为一个按钮增加阴影效果：

button {
  background-color: #ccc;
  border: none;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
}

4. 多列布局（column）

多列布局是一个比较新的 CSS 属性，可以快速实现垂直方向的多列布局，让页面内容更加分散和折叠。

.columns {
  column-count: 3;
  column-gap: 20px;
}

上面的代码中，我们使用了两个属性，分别是 column-count 和 column-gap。其中 column-count 属性用来设置列数，column-gap 属性用来设置列之间的距离。

以下是示例代码，将一个长的列表拆分成三列：

ul {
  column-count: 3;
  column-gap: 20px;
}

ul li {
  margin: 10px 0;
  background-color: #ccc;
}

5. 滤镜效果（filter）

滤镜效果是一个比较酷炫的 CSS 属性，可以实现一些非常有趣和个性化的效果。比如增加图片的模糊、颜色反转等。

filter: blur(10px);

上面的代码中，我们使用了一个属性，即 filter，用来设置滤镜的效果，可以使用很多不同的值。

以下是示例代码，将一张图片模糊处理：

img {
  width: 400px;
  height: 300px;
  filter: blur(10px);
}

以上就是详细的攻略，通过上述示例，可以更好地理解这五个实用的 CSS 属性。