css进阶

一.文本与字体样式

 font-weight: 100; 

            font-weight: 400;

            font-weight: 600; 

            font-weight: bold;

/* 字体加粗
            100-300更细
            400-500正常
            600-900 更粗
            bold 加粗
            bolder  加粗   与<strong>标签一样*/
            /* font-weight: 100; */

font-style:字体倾斜

           normal 正常

            italic 倾斜

            oblique  倾斜 强调

              font-style: normal; 
             font-style: italic;
             font-style: oblique;

text-shadow: 4px 4px 1px yellow; (文字阴影)

第一个值 横向偏移量

                第二个值 纵向偏移量

                第三个值  模糊程度

                第四个值  阴影颜色

单词与单词之间的距离 

            word-spacing: 20px;

             字母与字母之间的距离 

            letter-spacing: 10px;

二.css背景

 background-repeat: no-repeat, 平铺方式

                background-repeat: repeat-y; 

             background-repeat: repeat; 

            background-repeat: repeat-x; 

             background-repeat: no-repeat

背景图像是否滚动 

            background-attachment: fixed;

背景图片定位：

 背景图片定位

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

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

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

                1.

                top bottom left right center

                这五个值两两使用

                2.

                使用百分比

                第一个值是 x轴

                第二个值是 y轴

                3.

                使用固定值

 background-position: 10% 10%;

三.css边框

1.边框组合使用

 border-width: 20px;

宽度

                固定值

                thick：更宽（5px）

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

样式：

border-style: solid;

solid：实线

            dotted：点状线

            dashed：虚线

            groove: 槽线

颜色：

border-color: pink red #000 yellow;

border-color

            * 全部

            ** 上下 左右

            *** 上 左右 下

            **** 上 右 下 左

单个设方向：

border-方向-属性

2.css新增边框属性

圆角：

 border-radius: 10px;

圆角 顺时针

                * 四个角

                ** 左上右下  左下右上

                *** 左上  右上左下 右下

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

图片边框： 

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

30：上下  30:左右  round :平铺方式

3.盒子阴影

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

第一个值：横向偏移量

                第二个值：纵向偏移量

                第三个值：阴影模糊值

                第四个值：阴影外延

                第五个值：颜色

                第六个值：阴影朝向

                 inset        ouset