CSS3的几个标签速记(推荐)

下面是对“CSS3的几个标签速记(推荐)”的完整攻略：

CSS3的几个标签速记

CSS3 版本相比 CSS2.1 版本有了很多新增的功能和标签。本文介绍了这些 CSS3 标签的速记方式，以方便开发者更加快速地编写样式。

边框

圆角

使用 border-radius 属性可以设置元素的圆角大小：

/* 设置四个角的圆角大小为 10px */
div {
  border-radius: 10px;
}

/* 分别设置四个角的圆角大小 */
div {
  border-top-left-radius: 5px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 20px;
}

阴影

使用 box-shadow 属性可以为元素添加阴影效果：

/* 添加一个黑色、X轴偏移量为 5px、Y轴偏移量为 5px、模糊半径为 3px、扩张半径为 2px的阴影 */
div {
  box-shadow: 5px 5px 3px 2px black;
}

/* 添加多个阴影 */
div {
  box-shadow: 5px 5px 3px 2px black,
              -5px -5px 3px 2px white;
}

文字

字体

使用 font-family 属性可以设置元素的字体：

/* 设置元素的字体为宋体 */
div {
  font-family: "宋体", sans-serif;
}

对齐

使用 text-align 属性可以设置元素内文字的对齐方式：

/* 设置元素内文字水平居中对齐 */
div {
  text-align: center;
}

换行

使用 word-break 和 word-wrap 属性可以控制单词是否被拆分或者在换行时是否进行拆分：

/* 当单词无法完整显示时强制拆分（立即换行） */
div {
  word-break: break-all;
}

/* 允许单词在换行时拆分 */
div {
  word-wrap: break-word;
}

以上就是本文提供的 CSS3 标签速记方式。