css3中比较好用的属性

1、background（背景）

html

<div class="box"></div>

css

.box {
    width: 100%;
    height: 300px;
    /*
        background:
            url x y 是否重复（repeat重复   no-repeat不重复）
    */
    background: url(img/1.jpg) center center no-repeat;
    /*
        background-size:
            x y 百分比的值
            如果x给了值，y默认为auto
            contain
                等比例缩小来适应元素
            cover
                等比例放大来填满元素  
    */
    background-size: cover;
}

2、linear-gradient（径向渐变）

html

<div class="box"></div>

css

.box {
    width: 1000px;
    height: 300px;
    /* 
        background-image: linear-gradient(方向，颜色值，颜色值。。。。。。);   默认从上到下渐变,可以加to right，to left。。。。来标识渐变方向
     */
    background-image: linear-gradient(to right,#e66465, #9198e5);
        }

3、border-radius（圆角）

html

<div class="box"></div>

css

box {
    width: 150px;
    height: 150px;
    background-color: #555;
    /*
        border-radius:
            数值或百分比
    */
    border-radius: 10px;
}

4、box-shadow（阴影）

html

<div class="box"></div>

css

.box {
    width: 100px;
    height: 100px;
    background-color: #ccc;
    /*box-shadow: inset(内阴影) x y size 阴影扩展长度值 color; */
    /*box-shadow: x y size color;*/
    box-shadow: 1px 1px 5px rgba(0,0,0,0.4);
}

5、box-sizing

html

<div class="box"></div>

css

.box {
    width: 300px;
    height: 300px;
    border: 10px solid red;
    /*
        box-sizing: border-box;     不会去计算padding和border的值  元素的宽度就是给的宽度
    */
    box-sizing: border-box;
}

6、calc
html

<div class="box"></div>

css

.box {
    /*
        calc一般用在宽度为100%但是需要减去某个值的场景
    */
    width: calc(100% - 100px);
    height: 200px;
    background-color: #555;
}

7、filter（滤镜）
html

<img src="img/1.jpg" alt="">

css

img{
          /*
              filter: blur(5px);                            模糊度
              filter: brightness(0.4);                      亮度
              filter: contrast(200%);                       对比度
              filter: drop-shadow(16px 16px 20px blue);     阴影
              filter: grayscale(50%);                       灰度
              filter: hue-rotate(90deg);                    色相旋转
              filter: invert(75%);                          反色
              filter: opacity(25%);                         透明度
              filter: saturate(30%);                        饱和度
              filter: sepia(60%);                           褐色程度
          */
          filter: blur(3px);
      }

8、-webkit-user-modify（内容是否可写入）
html

<div class="box"></div>

css

 .box {
          width: 200px;
          height: 200px;
          border: 1px solid #ccc;
          /*
              -webkit-user-modify
                  只读|      内容可读写|   内容可读写，但是粘贴的文本格式会丢失
                  read-only| read-write| read-write-plaintext-only
          */
          -webkit-user-modify: read-write;
        }

9、user-select（内容是否可选中）
html

<div class="box">111111111111111</div>

css

.box {
          /*
              user-select:
                  用户可选内容| 不可选| 可选文本
                  auto|      none|       text
          */
          user-select: text;
      }