CSS的字体,背景,边框的样式补充

目录

字体

加粗

倾斜

字体样式

阴影

间隔

图片文字对齐

背景图片

背景图像滚动

起始位置

调整图片大小

边框

边框宽度

样式

边框颜色

边框圆角

方框阴影

---

字体

加粗

100-300等同于lighter

400-500 本身不变 normal一样

600-900 加粗 bold加粗 bolder强调加粗

font-weight: bolder;

倾斜

italic倾斜 normal正常 oblique强制倾斜

font-style: italic;

字体样式

如果有两种字体 先执行前面的,后面的是备用

font-family: "狂草","楷体";

阴影

第一个值 x轴偏移

第二个值 y轴偏移

第三个值 模糊程度

第四个值 颜色

text-shadow: 20px 30px 1px red;

间隔

字间隔 字母之间的间隔

letter-spacing: 20px;

段落间隔 每一个单词之间的间隔

word-spacing: 20px;

空白会被保留

white-space: pre;

规定不换行 直到遇到br标签

white-space: nowrap;

保留空白符 能正常换行

white-space: pre-wrap;

合并空白符 保留换行符

white-space: pre-line;

图片文字对齐

元素放置在父元素的基线上  (基线:英文格子第三条线上)

vertical-align: baseline;

顶端对齐

vertical-align: top;

背景图片

背景图像滚动

background-attachment: fixed;

起始位置

设置图像起始位置 前面一个值代表横向 后面一个值代表纵向一个值时 默认填充另一个方向为center

1.top bottom left right center 这五个值两两使用

 2.使用百分比 第一个值为x轴 第二个值为y轴

background-position: center center;

调整图片大小

background-size: 100% 100%;

整个铺满 横向和竖向都要撑满

background-size: cover;

横向和竖向有一边撑满就满了

background-size: contain;

边框

边框宽度

1.thin 相当于1px 最细

2.thick 相当于5px 粗

3.固定值

border-width: 15px;

样式

实线

border-style: solid;

点状边框

border-style: dotted;

虚线

border-style: dashed;

槽线边框

border-style: groove;

边框颜色

一个值 上下左右

两个值 上下 左右

三个值 上 左右 下

四个值 上 右 下 左

border-color: red;

边框圆角

一个值 四个角

两个值 左上右下 左下右上

三个值 左上 左下右上 右下

四个值 左上 右上 右下 左下

border-radius: 5%;

方框阴影

第一个值 横向偏移量

第二个值 纵向偏移量

第三个值 阴影宽度

第四个值 阴影宽度

第五个值 颜色

第六个值 inset内阴影

box-shadow: 10px 10px 30px red;