阴影、用户界面、选择器、背景

一、阴影

1.1 盒子阴影

     /* 盒子阴影：
                第一个值：阴影的水平位置  正值往右 负值往左(必须写)
                第二个值：阴影的垂直位置  正值往下 负值往上（必须写）
                第三个值：阴影模糊的大小
                第四个值：影子的大小  正值大  负值小   0和盒子一样大
                第五个值：阴影的颜色 （默认黑色）
                第六个值：内阴影外阴影  inset是内   默认就是外阴影
​
            */
            /* box-shadow:0px 0px 10px 0px blue inset; */
            /* box-shadow: 0px 0px 10px 0px blue,10px 10px 10px 5px yellow; */ 支持多阴影，                           每组值之间用逗号分隔
            box-shadow: 10px 10px;

1.2 文字阴影

 /* 
                第一个值：阴影的水平位置  正值往右 负值往左(必须写)
                第二个值：阴影的垂直位置  正值往下 负值往上（必须写）
                第三个值：阴影模糊的值  默认是0
                第四个值：阴影的颜色  默认和文字颜色一致
            */
            /* text-shadow:10px 10px 5px #000; */
            text-shadow: 10px 10px 5px #000,-10px -10px 5px yellow;  可以写多个阴影

二、用户界面

2.1 box-sizing属性

box-sizing:border-box;
box-sizing:content-box;
​
​
   /*   宽度 = 内容+padding + border
               宽度包含的有 内容 和 内边距 和 边框
               高度同理
            */
    box-sizing: border-box; /*怪异盒模型*/
​
    box-sizing: content-box;/*标准盒模型 默认*/

三、选择器

3.1 属性选择器

  /* css2 属性选择器 */
        /* div[class="box"]{
            color: red;
        } */
​
        /* div[id="div"]{
            color: red;
        }
​
​
​
/* css3*/
        /* ^ 必须以谁开头 */
        /* div[class^="box"]{
            color: red;
        } */
​
        /* $ 必须以谁结尾 */
        /* div[class$="box"]{
            font-size: 50px;
        } */
​
        /* * 包含某个值 */
        /* div[class*="box"]{
            font-weight: bold;
        } */

3.2 状态伪类选择器

     /* 可用状态设置一个边框 */
        input:enabled{
            border: 2px solid red;
        }
        /* 让状态是checked的属性 设置宽度 */
        input:checked{
            width: 50px;
            height: 50px;
        }
        /* 让状态是禁用时  设置一个背景颜色 */
        input:disabled{
            background-color: red;
        }

3.3结构伪类选择器

​