CSS3学习笔记二---阴影 | 圆角边框 | 字体引入

一：文本阴影（text-shadow）

        text-shadow：10px 10px 10px red；

           第一个数值：水平方向上的位移，也可以设置负值。

           第二个数值：垂直方向上的位移，可设置负值

           第三个数值：模糊程度，数值越大越模糊。

           第四个：阴影颜色

          设置多个阴影：text-shadow：10px 10px 10px red，-10px -10px 5px red；（中间用逗号隔开，设置多个阴影）

二：盒子阴影（box-shadow）

1： 水平、垂直位移，模糊设置，颜色同text-shadow；

2：box-shadow：10px         10px         9px          8px           red            inset；

                            水平位移  垂直位移  模糊程度  阴影大小  阴影颜色   内阴影（在盒子内部）

3：inset：默认不加为外阴影，内阴影是指在盒子内部。

三：圆角边框

1：border-radius：10px；/*  px或者百分比  */

2：border-radius：10px 20px；/*  左上右下一致，左下右上一致（对角）  */

3：border-radius：10px 20px 30px；/*  左上，左下右上，右下  */

4：border-radius：10px 20px 30px 40px；/*  顺时针方向设置  */

5：border-top-left-radius（左上），单词垂直方向上在前；

     border-top-right-radius（右上），border-bottom-left-radius（左上）

     border-bottom-right-radius（右下）

6：border-radius：30px/60px；（水平/垂直）

     水平方向上是30px，垂直方向上是60px，连接起来的圆角，这种写法只支持border-radius；

    border-radius：10px 20px 30px 40px/50px 60px 70px 80px；

                               水平方向上                 垂直方向上

7：圆：border-radius=盒子的一半，前提盒子宽高相等

      设置px时，注意盒子的内，外边距。

     border-radius：50%；这种写法比较常见，无需担心边距问题。

8：长方形设置圆角：一般不会用百分比，而是用具体的px；

9：半圆形：长方形：宽是高的两倍的情况

      border-radius：高度数值    高度数值      0           0；

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

10：扇形：正方形，只设置单个角，其他角为0。

       border-radius：宽（高）度数值  0  0  0；

四：字体引入

<style>
    @font-face{
        font-family:aaa;
        /* 自定义引入字体样式名字 */
        src: url(引入字体文件路径);
    }

    .div{
        font-family:aaa;
        /*  调用引入字体 */
    }
</style>