CSS进阶

1.平铺方式

background-repeat: no-repeat;

repeat:默认，全平铺

repeat-x:横着铺一行

repeat-y:竖着铺一行

no-repeat:不平铺

2.图片大小

background-size: cover;

百分比

cover 横向或竖向都要撑满

contain 横向或竖向有一边撑满就满了

3.背景图片是否滚动

background-attachment: fixed;

                背景图片定位

                第一个值：x轴（横向）定位方式

                第二个值：y轴（竖向）定位方式

                一个值时，默认填充另一个方向为center

                1.

                top bootom left right center

                这五个值两两使用

                2.

                使用百分比

                第一个值是x轴

                第二个值是y轴

                3.

                使用固定值

4.盒子阴影

box-shadow: 20px 20px 50px 20px red inset;

盒子阴影

第一个值：横向偏移量

第二个值：纵向偏移量

第三个值：阴影模糊值

第四个值：阴影外延

第五个值：颜色

第六个值：阴影朝向

5.字体加粗

font-weight: bold;

字体加粗

100-300：更细

400-500：正常

600-900：加粗

bold:加粗 同600

bolder:加粗，强调 同<strong>标签

6.字体倾斜

font-style: italic;

字体倾斜

mormal:正常

italic:斜体

oblique:倾斜（强制倾斜）

7.文字阴影

text-shadow: 4px 2px 1px pink;

文字阴影

                第一个参数：横向偏移量

                第二个参数：纵向偏移量

                第三个参数：模糊程度

                第四个参数：阴影颜色

8.文本间隔

word-spacing: 20px;

letter-spacing: 20px;

word-spacing:单词之间的间隔

letter-spacing:字间隔，字母之间的间隔

9.指定空白怎么处理

white-space: pre;

pre 空白会被保留

nowrap：规定不换行，直到遇到<br> 标签

pre-wrap：保留空白符，能正常换行

pre-line：合并空白符，保留换行符

10.边框组合使用

border: 10px solid #000;

11.样式

border-style: solid;

   solid:实现

            dotted:点状线

            dashed：虚线

            groove：槽线

12.颜色

border-color: pink red yellow ;

border-color

                *全部

                **上下 左右

                ***上 左右 下

                ****上 右 下 左

13.单个方向设

 border-方向-属性

圆角 顺时针

*四个角

                **左上右下 左下右上

                ***左上 右下左下 右上

                ****左上 右上 右下 左下