CSS进阶：文本与字体样式、背景、边框

文本与字体样式：

        字体加粗：font-weight: bold;

                        100-300：更细

                        400-500：正常

                        600-900：加粗

                        bold：加粗 同600

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

        字体倾斜：font-style: italic;

                        normal：正常

                        italic：斜体

                        oblique: 倾斜（强制倾斜）

        字体样式：font-family: '微软雅黑','楷体';

        文字阴影：text-shadow: 4px 2px 1px pink;

                        第一个参数：横向偏移量

                        第二个参数：纵向偏移量

                        第三个参数：模糊程度

                        第四个参数：阴影颜色

        文本间隔：word-spacing: 20px;         letter-spacing: 20px;

                        word-spacing: 单词之间的间隔

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

        指定空白怎么处理：white-space: pre;

                        pre 空白会被保留

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

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

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

        拓展：word-wrap:break-word;                word-break: break-all;

                        word-wrap： break-word 允许长的内容可以自动换行

                        word-break： break-all 无差别强制换行

        行高：line-height: px; （值给盒子高度，实现垂直居中）

        文本和图片的对齐方式：vertical-align: middle;        （修改基线位置实现对齐）

                        默认是基线对齐（基线：英文格子第三条线）

                        vertical-align: top 顶端对齐

                        vertical-align: middle  居中对齐

                        vertical-align: bottom  底部对齐

背景：

        背景颜色：background-color: pink;

        平铺方式：background-repeat: repeat;

                        repeat：默认，全平铺

                        repeat-x：横着铺一行

                        repeat-y：竖着铺一行

                        no-repeat：不平铺

        图片大小：background-size: cover;

                        1. 百分比

                        2. cover 横向和竖向都要撑满

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

        背景图像是否滚动：background-attachment: fixed;

        背景图片定位：background-position: 10% 10%;

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

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

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

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

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

                        3.使用固定值

        盒子阴影：box-shadow: 20px 20px 50px 20px red;

                        第一个值：横向偏移量                第四个值：阴影外延

                        第二个值：纵向偏移量                第五个值：颜色

                        第三个值：阴影模糊值                第六个值：阴影朝向

边框：

        边框组合使用：border: 10px solid #000;

        边框宽度：border-width: 20px;

                        固定值

                        thick：更宽（5px）

                        thin：更细（1px、视觉上更细）

        边框样式：border-style: solid;

                        solid：实线

                        dotted：点状线

                        dashed：虚线

                        groove: 槽线

        边框颜色：border-color: pink red #000 yellow;

                        一个值：全部

                        两个值： 上下 左右

                        三个值： 上 左右 下

                        四个值： 上 右 下 左

        边框圆角：border-radius: 10px;                圆角 顺时针

                        一个值：全部

                        两个值： 上下 左右

                        三个值： 上 左右 下

                        四个值： 上 右 下 左

                        单个方向设 ：border-方向-属性

                        border-top-属性

        边框设为图片：border-image: url('图片路径') 30 30 round;