css进阶

文本样式：

1、字体加粗 font-weight:

    .p1{
        /* 100~300/lighter  变细 */
        font-weight: lighter;
    }
    .p2{
        /* 400~500/normal  正常 */
        font-weight: normal;
    }
    .p3{
        /* 600~900/bold    加粗
            bolder          强调加粗 */
        font-weight: bold;
    }

2、倾斜 font-style:

            italic          倾斜
            obligue         强调倾斜
            normal          正常(默认) 
            
    .p5{
        font-style: italic;
    }

3、字体 font-family:

            字体样式(如楷体)-----可以用逗号隔开，会先执行前面的字体，后面的为备用字体
   
    .p6{
        font-family: '楷体','宋体';
    }

4、文字阴影 text-shadow:

            x轴     y轴     模糊度      颜色 
            
    .p7{
        text-shadow: 1px 2px 2px red;
    }

5、文本间隔

            值可以规定数值或者默认(normal)
    
    /* 单词间隔     word-spacing: */
    .p8{
        word-spacing: 30px;
    }
    /* 字母间隔     letter-spacing: */
    .p9{
        letter-spacing: 20px;
    }

6、指定空白 white-space:

    .p10{
        /*  pre    保留所有空白(如空格 回车等)   */
        white-space: pre;
        /*     nowrap  不换行(br可以强制换行)*/
        white-space: nowrap;
        /*  pre-wrap    保留空白，能正常换行*/
        white-space: pre-wrap;
        /* pre-line    合并空白符，保留换行 */
        white-space: pre-line;
    }

    img{
        /* italic          倾斜 */
        vertical-align: baseline;
        /* top         头部对齐 */
        vertical-align: top;
        /* middle      中部 */
        vertical-align: middle;
        /* bottom      底部 */
        vertical-align: bottom;
    }

背景：

1、背景图片随页面滚动 background-attachment:

        background-attachment: fixed;

2、起始位置(背景定位) background-position:

                x轴 y轴
                值为 上(top)下(bottom)左(left)右(right)居中(center)
                    百分比值
                    固定值
            只写一个值时另一个默认填充为居中(center)
       
        background-position: left center;

3、尺寸(等比例缩放)

                cover   拓展到完全覆盖
                contain 宽高撑满一边为止
        
        background-size: cover;
        background-size: contain;

边框(boder)：

            宽                  样式                颜色
          medium(默认)        无样式(默认)        默认黑色
          细(thin)            实线(solid)        transparent(透明) 
          粗(thick)           虚线(fashed)          
                              点状(dotted)
                              槽线(groove)
                              3D垄状(ridge)
                              3Dinsert(insert)
                              3Doutset(outset)

圆角(border-radius)：

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

图片边框(border-image)：

            url 宽  高  平铺(round)

    边框阴影(box-shadow:)：
            x轴 y轴 模糊度  阴影外延  颜色  阴影朝向(内（inset） 外(默认))
            

 -->

代码示例：

        圆角(border-radius)： */
        border-radius: 20px;
        /* 图片边框(border-image:)： */
        border-image: url(./img/sc17.png);
        /* 边框阴影(box-shadow:)： */
        box-shadow: 1px 2px 3px red;