CSS功能汇总

CSS（层叠样式表）是一种用来描述网页和其他HTML文件样式的语言。以下是一些关键CSS功能的概述和示例代码：

1. 字体和文本样式:

p {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #333333;
  text-align: center;
}

2. 背景和边框:

div {
  background-color: #cccccc;
  border: 1px solid black;
  padding: 20px;
  margin: 10px;
}

3. 布局和浮动:

.column {
  float: left;
  width: 50%;
}
 
/* 清除浮动 */
.row::after {
  content: "";
  display: table;
  clear: both;
}

4. 盒模型和定位:

#box {
  width: 300px;
  height: 200px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}
 
/* 绝对定位 */
#box-relative {
  position: relative;
  top: 10px;
  left: 20px;
}

5. 伪类和动画:

/* 链接伪类 */
a:link { color: blue; }
a:hover { color: red; }
 
/* 动画 */
@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}
 
@-moz-keyframes example /* Firefox */ {
  from { background-color: red; }
  to { background-color: yellow; }
}
 
#animatedBox {
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

6. CSS3特效:

/* 圆角边框 */
div {
  border: 2px solid #a1a1a1;
  border-radius: 25px;
}
 
/* 阴影效果 */
div {
  box-shadow: 10px 10px 5px #888888;
}
 
/* 渐变背景 */
div {
  background: linear-gradient(to right, red , yellow);
}

CSS是一种非常强大的语言，可以用来创建各种复杂的设计和布局。上述示例展示了CSS的一些基本功能和如何使用它们来装饰网页元素。