浅谈html5标签css3的常用样式

下面是关于“浅谈HTML5标签CSS3的常用样式”的完整攻略：

HTML5标签的常用样式

div

div是HTML5中最常用的标签之一，主要用于区分网页中的不同部分，通常用CSS样式来设置其外观。下面是一个设置div样式的示例：

div {
  width: 200px;
  height: 200px;
  background-color: gray;
  border: 2px solid black;
  padding: 10px;
  margin: 10px;
}

此代码片段会将所有的div元素设置为200x200像素的灰色方块，带有2像素的黑色实线边框，外部留有10像素的边距和内部留有10像素的填充。

section

section是HTML5中用于表示文档的不同部分的标签，通常用于网页特定部分的设置样式。下面是一个设置section样式的示例：

section {
  width: 80%;
  margin: auto;
  border: 1px solid black;
  padding: 20px;
}

此代码片段将所有的section元素设置为占据父容器宽度的80%，水平居中，并设置1像素的黑色实线边框和20像素的填充。

CSS3的常用样式

圆角

CSS3允许我们为HTML元素设置圆角，这在视觉上为网页添加了更多的深度和层次感。下面是一个为div设置圆角的示例：

div {
  border-radius: 20px;
  /* 或者使用以下兼容版本 */
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
}

此代码片段将所有的div元素设置为四个角处都有20像素的圆角。

动画

CSS3还允许我们为HTML元素设置动画，这可以增加网页互动性和吸引力。下面是一个添加旋转动画的示例：

div:hover {
  transform: rotate(360deg);
  /* 或者使用以下兼容版本 */
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
}

此代码片段将所有鼠标悬停在div元素上时，会以360度的速度旋转一圈。

以上就是关于“浅谈HTML5标签CSS3的常用样式”的攻略。