一、文字样式
- font-size: 30px; 文字大小
- font-weight: bold;文字加粗
- font-style: italic; 文字倾斜
- font-family: “宋体”; 字体
- font-variant: small-caps;小型大写字母
二、文本样式
- text-shadow: 水平方向位移 竖直方向上位移 模糊度 颜色; 文本阴影
- color:red; 设置文本颜色
- text-decoration: none; 文本样式 去线 text-decoration:underline line-through;叠加线
- text-transform: capitalize;首字母大写
- text-indent: 2em; 文本缩进2个字符 应用于p段落标签上
- text-align: center; 文本居中
- line-height: 100px; 文本行高,一般用来做竖直位置上剧中效果
- word-wrap: break-word; 文本换行
- white-space: nowrap; 文本不换行
三、背景样式
- background-color: aquamarine; 背景颜色
- background-image: url(./img/1.jpg);背景照片
- background-repeat: no-repeat;背景不重复
- background-positio n:center;背景定位
- background-size: cover/100%; 背景覆盖完全,照片可能不完全展示。contain照片宽或高一边完全覆盖,图片展示完全
- background-attachment: fixed;背景固定
- background-origin:content-box; 背景盒模型定位默认从padding开始定位
- background-clip: content-box; 背景裁剪
边框样式
- border: 线宽 线样式 颜色;
- border-top-color: transparent; 上边框
- border-left-color: transparent;左边框
- border-bottom-color: transparent;下边框
- border-right-color:green; 右边框
- border-style: solid;边框类型(solid实线)
- 阴影
.box1:hover{
box-shadow: 12px 12px 3px gray;
transition: 0.3s;
}