CSS3常用属性

1.文本阴影：
        text-shadow: x轴位置  Y轴位置  阴影大小  阴影颜色
        注：如果想添加多个阴影  每一组阴影以逗号分隔。
  列：text-shadow:-13px -1px 0px #6f3c3c, -32px 7px 19px grey;

2.盒子阴影：
        box-shadow: x y 阴影的模糊度 阴影扩散的大小 阴影颜色 内阴影(inset 可选)
     添加多阴影：以逗号分隔的形式添加多阴影
  列：box-shadow:10px 10px 10px 20px gray inset;

3.英文或者数字默认显示：如果没有换行的情况下：尝试把下一个长单词放在下一行显示。
     word-wrap:break-word:
         功能：尝试把长单词换到下一行显示，如果在下一行仍然有超出的情况下，自动断句。
     word-break:break-all;
         功能：粗暴的断句。

4.背景：
  background-origin:背景图的起始位置
         padding-box; 默认值（padding区域开始）
         border-box; 边框后面开始
         content-box; 从内容区域开始
     background-clip:; 背景的裁切（只显示哪个区域的背景）
         border-box:;默认值
         padding-box:;
         content-box:;
 background-size:;  控制背景图的大小
         属性值：宽度   高度
             属性值的数值：
                 10px  10px
                 100%  100%
                 cover       按照背景图的比例放大到全部平铺在元素后面则停止
                 contain     按照比例放大，当宽或者高，达到容器最高则停止

 多背景图的设置：
         background:url() no-repeat,url() no-repeat,url()

     如果让背景图在不变形的情况下，填满整个内容区：  background-size:cover

5.颜色模式：
 rgb()
     rgba()    ->  让背景颜色透明（内容不会产生透明）
 background:hsla(240,50%,44%,0.5);

6.图片边框：
        把一张图片，当作一个边框就行显示。
     border-image:;   简写
         border-image-source 用在边框的图片的路径。
  border-image-slice 图片边框向内偏移(不加单位)。 [ 把图片切割成九宫格 ]
  border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)
  border-image-outset 边框向外偏移
7.圆角：
 border-radius: 半径!
         一个值：四周圆角
         两个值：左上角及右下角    右上角及左下角
         三个值：左上角   右上角及左下角    右下角
         四个值：从左上角开始 顺时针设置。（左上 右上 右下 左下）
        分垂直半径和水平半径：
         border-radius: 水平半径 / 垂直半径

8.width的属性值：
        fill-available   合理分配有效剩余空间
        fit-content      找子元素内容的宽度。按照子元素的宽度进行设置
       
        max-content      找子元素最大的宽度
        min-content      找子元素最小的宽度
 
    面试题:
        width:100% 和 width:fill-available；有什么区别？？

        对padding增加后的解析状态有影响。
9.calc计算：
 calc(100% - 200px)
  列：width:calc(100% - 200px);
10.css3事件：
 pointer-events:none;
        阻止各种按钮（button\a）的功能
        穿透遮罩层