[分享]css3常用的语法

CSS3是现代网页设计必不可少的一部分，能够帮助我们实现装饰、布局、动画等炫酷的效果。了解CSS3的语法对于我们学习它的应用非常重要，下面就让我们来看一下CSS3常用的语法。1.选择器/ 元素选择器 ...

CSS3是现代网页设计必不可少的一部分，能够帮助我们实现装饰、布局、动画等炫酷的效果。了解CSS3的语法对于我们学习它的应用非常重要，下面就让我们来看一下CSS3常用的语法。

1.选择器

/* 元素选择器 */
div {
  color: blue;
}

/* 类选择器 */
.title {
  font-size: 18px;
}

/* ID选择器 */
#container {
  width: 100%;
}

/* 后代选择器 */
nav ul li a {
  text-decoration: none;
}

/* 伪类选择器 */
a:hover {
  color: red;
}

2.属性

/* 背景颜色 */
body {
  background-color: lightblue;
}

/* 文本颜色 */
h1 {
  color: red;
}

/* 边框 */
div {
  border: 1px solid gray;
}

/* 字体大小 */
p {
  font-size: 16px;
}

/* 行高 */
p {
  line-height: 1.5;
}

3.盒子模型

/* 内边距 */
div {
  padding: 10px;
}

/* 外边距 */
div {
  margin: 10px;
}

/* 宽度 */
div {
  width: 100%;
}

/* 高度 */
div {
  height: 200px;
}

/* 边框 */
div {
  border: 1px solid gray;
}

4.渐变色

/* 线性渐变 */
div {
  background: linear-gradient(to right, red, yellow);
}

/* 径向渐变 */
div {
  background: radial-gradient(circle, red, yellow);
}

5.动画

/* 定义动画 */
@keyframes move {
  from {left: 0px;}
  to {left: 200px;}
}

/* 使用动画 */
div {
  animation: move 2s;
}

以上是CSS3常用的语法，通过学习这些语法，我们可以更好地应用CSS3来实现我们想要的网页效果。