css进阶

 字体加粗

                100-300：更细

                400-500：正常

                600-900：加粗

                bold：加粗 同600

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

字体倾斜

                normal：正常

                italic：斜体

                oblique: 倾斜（强制倾斜）

文字阴影

                第一个参数：横向偏移量

                第二个参数：纵向偏移量

                第三个参数：模糊程度

                第四个参数：阴影颜色

 文本间隔

                word-spacing: 单词之间的间隔

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

指定空白怎么处理

                pre 空白会被保留

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

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

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

拓展

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

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

        p{
            font-weight: bold;
            font-family: '狂草','楷体';
            text-shadow: 4px 2px 1px pink;
            word-spacing: 20px;
            letter-spacing: 20px;
            white-space: pre;

            word-wrap: break-word;
            word-break: break-all;

        }

文本和图片的对齐方式

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

                vertical-align： top：顶端对齐

vertical-align: middle;

 平铺方式

                repeat：默认，全平铺

                repeat-x：横着铺一行

                repeat-y：竖着铺一行

                no-repeat：不平铺

图片大小

                1. 百分比

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

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

背景图像是否滚动

背景图片定位

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

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

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

                1.

                top bottom left right center

                这五个值两两使用

                2.

                使用百分比

                第一个值是 x轴

                第二个值是 y轴

                3.

                使用固定值

盒子阴影

                第一个值：横向偏移量

                第二个值：纵向偏移量

                第三个值：阴影模糊值

                第四个值：阴影外延

                第五个值：颜色

                第六个值：阴影朝向

    <style>
        div{
            width: 400px;
            height: 400px;
            background-color: pink;
            background-image: url('./img/sc17.png')
                            ,url('./img/sc5.png')
            ;
            background-repeat: no-repeat,repeat;
            background-size: cover;
            background-attachment: fixed;
            background-position: 10% 10%;
            box-shadow: 1px 1px 5px 5px red inset;


        }
    </style>

宽度

                固定值

                thick：更宽（5px）

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

样式

            solid：实线

            dotted：点状线

            dashed：虚线

            groove: 槽线

颜色

            border-color

            * 全部

            ** 上下 左右

            *** 上 左右 下

            **** 上 右 下 左

单个方向设

            border-方向-属性

圆角 顺时针

                * 四个角

                ** 左上右下  左下右上

                *** 左上  右上左下 右下

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

    <style>
        .a{
            float: left;
            margin-right: 30px;
            width: 400px;
            height: 400px;
            border-width: 20px;
            border-style: solid;
            border-color: pink red #000 yellow;
            border-radius: 10px;

            border-image: url('./img/sc17.png') 30 30 round;
        }
    </style>