一、css3属性
1、文本阴影属性
text-shadow:10px 10px 10px red;
注： 第一个值 ： 水平方向的距离 （必须有的：支持负值）
第二个值 ： 垂直方向的距离 （必须有的：支持负值）
第三个值 ： 阴影的模糊程度 （不支持负值）
第四个值 ： 阴影的颜色
第一个值 和 第二个值得位置不能互换；
当给同一个文字设置多个阴影的时候，阴影和阴影之间用逗号隔开：
如： text-shadow:0 0 4px white,0 -5px 4px #ff3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;
说明：水平、垂直阴影的位置允许负值
可进行多阴影设置(逗号分隔的方式)
2、盒子阴影属性
box-shadow 盒子阴影：
X-shadow 必需的。水平阴影的位置。允许负值
Y-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影
box-shadow: 10px 10px 5px 10px #888888 inset;
当给一个盒子设置多个阴影的时候，阴影和阴影之间用逗号隔开：
box-shadow: 10px 10px 5px 10px #888888 inset，10px 10px 5px 10px #888888 inset，10px 10px 5px 10px #888888 inset;
3、文本换行
1）Word-wrap
属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
属性值：
normal (默认值)
说明：只在允许的断字点换行（浏览器保持默认处理）
break-word
说明：属性允许长单词或 URL 地址换行到下一行
2）Word-break
属性值：
break-all
说明：它断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句
Keep-all
说明：文本不会换行，只能在半角空格或连字符处换行 (默认值)
4、@font-face
@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体（@font-face这个功能早在IE4就支持）
@font-face的语法规则:
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][, []]*;
[font-weight: <weight>];
[font-style: <style>];
}
iconfont字体图标库的使用 ：https://www.iconfont.cn/ 阿里巴巴矢量图库
使用方法：
Unicode ： 新引进iconfont.css 文件
在页面内添加个i标签
给i标签 添加 基类 （基本的类名） .iconfont
在把小图标对应的编码添加到i标签内即可
Font class:
新引进iconfont.css 文件
在页面内添加个i标签
给i标签 添加 基类 （基本的类名） .iconfont
在把小图标对应的class名字加到i标签内即可
Symbol:
<script src="./iconfont/iconfont.js"></script>
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-XXX"></use>
</svg>
在把小图标对应的#icon-XXX名字加到use标签内即可
5、颜色模式：
1、rgba 颜色模式 rgb（）
2、 Hsl 颜色模式（了解）
3、 Hsla 颜色模式（了解） 带有透明度设置的
就是色调(Hue)、饱和度(Saturation)、亮度(Lightness)三个颜色通道的改变以及它们相互之间的叠加来获得各种颜色，色调(Hue)色调最大值360，饱和度和亮度有百分比表示0-100%之间。
color： Hsla(200,50%,50%,0.5)
color： Hsl(200,50%,50%)
a（透明度）的取值范围是0——1
6、Background-size 背景尺寸
说明：background-size 规定背景图像的尺寸
属性值
length (10px)
规定背景图的大小。第一个值宽度，第二个值高度。（直接定义背景图的大小）
Percentage(%)
以百分比为值设置背景图大小（参照元素的大小）
cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
contain
把图像图像扩展至最大尺寸，以使其宽度或高度完全适应内容区域。
复合式写法：background: url(img/laoli.jpg) no-repeat 0 0/cover;
说明：backgroun-size和background-position要用 “ / ” 组成一个属性值一起写；
7、background-origin 背景原点（起始点）位置
说明：指定background-origin属性应该是相对位置
属性值
padding-box 背景图像填充框的相对位置 （从padding区开始显示背景图）默认值
border-box 背景图像边界框的相对位置（从边框区开始显示背景图）
content-box 背景图像的相对位置的内容框 （从内容区开始显示背景图）
8、background-clip 背景裁切
说明：background-clip 属性规定背景的绘制区域。
属性值
border-box 背景被裁剪到边框盒。 默认值
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。
扩展：text： 背景被裁剪到文字。
说明：-webkit-background-clip: text; 使用时要加浏览器前缀
9、添加多张背景图:
语法：background:url(),url();
background:url(img/corner_lt.gif) no-repeat left top,
url(img/corner_rt.gif) no-repeat right top,
url(img/corner_rb.gif) no-repeat right bottom,
url(img/corner_lb.gif) no-repeat left bottom;
background-color:#63ceff;
扩展：
10、模糊：blur
filter : blur(value)
说明：值越大，越模糊；
11、图片边框属性：
border-image 属性是一个简写属性，用于设置以下属性:
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移(不加单位)。
border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)
border-image-outset 边框图像区域超出边框的量(值是一个倍数或者具体的数值)
复合式写法：
border-image:url(img/a.png) 20 round ;
border-image-outset :50px;
说明：border-image-outset 属性 尽量不要跟其他属性缩写在一起；
12、CSS圆角属性：
Border-radius：
语法：border-radius: 20px; 代表每个角的X轴的弧度和Y轴的弧度是一样的；
语法：border-radius: 20px/50px; 代表每个角的X轴的弧度是20px,Y轴的弧度是50px；
说明：10px 20px 30px 40px/50px 40px 30px 20px; “/ ”前表示X轴的弧度 ；“/ ”后 表示Y轴的弧度
用法： border-radius: 10px; 四个角的值都是10px;
border-radius: 10px 20px; 值1：左上和右下 ；值2 ：右上和左下
border-radius: 10px 20px 30px ; 值1：左上 ；值2 ：右上和左下 ；值3：右下；
border-radius: 10px 20px 30px 40px ; 值1：左上 ；值2 ：右上和 ；值3：右下； 值 4：左下
13、width的属性值：
fill-available、fit-content、max-content、min-content
fill-available : 让子元素始终和父元素是等宽的；
说明：width:-webkit-fill-available; 不兼容 ，需要加浏览器前缀； （一般加给子元素，来适应父元素的宽度）
fit-content： 让元素适应内容的宽度；
max-content: 让元素以内部最大宽的占位来显示自己的宽度；
min-content: 让元素以内部最小宽的占位来显示自己的宽度；
14、css3 calc()（四则运算）
说明：width:calc(100% - 200px);
width:calc(100% - 200px);
注：运算符前后必须要留空格；
+ - * /
加法和减法直接写数值就好；
乘法和除法 要写倍数 不用加单位 ；
15、pointer-events：阻止鼠标事件 、 穿透效果
pointer-events:none;
