前端学习Day21

一、阴影属性
1、文本阴影： text-shadow: x轴位置 Y轴位置 阴影大小 阴影颜色;
注：如果想添加多个阴影 每一组阴影以逗号分隔。
2、盒子阴影： box-shadow: x y 阴影的模糊度 阴影扩散的大小 阴影颜色 内阴影(inset 可选)；
注：添加多阴影：以逗号分隔的形式添加多阴影。
二、文本换行
英文或者数字默认显示：如果没有换行的情况下：尝试把下一个长单词放在下一行显示。
word-wrap:break-word；
功能：尝试把长单词换到下一行显示，如果在下一行仍然有超出的情况下，自动断句。
word-break:break-all; 功能：粗暴的断句。
三、字体图标
百度搜索iconfont→注册（微博账号）→搜素所需图标→加入库→购物车→下载代码→解压并打开demoindex.html
步骤：在head中引入下载下来的iconfont.css

在body中对应位置写：
三种（1）用Font-class图标

icon-qian12是从之前的库中复制粘贴来的。
（2）用Unicode图标

在中间内容区写上复制粘贴来的图标编码。
（3）用Symbol图标
a.引入一串js，修改路径
b.复制粘贴style代码放入header中
c.复制粘贴一串svg放入body中
注：a.Unicode和Font-class是黑白图标，Symol是彩色图标
b.每一个小图标都相当于一个标签，可以用span，em，i等标签来写
四、背景
1.属性：background-origin: ;背景图的起始位置
属性值：padding-box; 默认值（padding区域开始）
border-box; 边框后面开始
content-box; 从内容区域开始
2.属性：background-clip: ; 背景的裁切（只显示哪个区域的背景）
属性值：border-box;默认值
padding-box;
content-box;
3.属性：background-size: ; 控制背景图的大小
属性值：宽度 高度
属性值的数值：
10px 10px
100% 100%
cover 按照背景图的比例放大到全部平铺在元素后面则停止
contain 按照比例放大，当宽或者高，达到容器最高则停止
4.多背景图的设置：
background:url() no-repeat,url() no-repeat,url();
如果让背景图在不变形的情况下，填满整个内容区：
用background-size:cover;
五、颜色模式
rgb()
rgba() -> 让背景颜色透明（内容不会产生透明）
background:hsla(240,50%,44%,0.5);
六、边框
图片边框： 把一张图片，当作一个边框显示。
border-image: ; 简写
border-image-source 用在边框的图片的路径
border-image-slice 图片边框向内偏移(不加单位) [ 把图片切割成九宫格 ] border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)
border-image-outset 边框向外偏移
七、圆角
border-radius: 半径;
属性值：一个值：四周圆角
两个值：左上角及右下角 右上角及左下角
三个值：左上角 右上角及左下角 右下角
四个值：从左上角开始 顺时针设置。（左上 右上 右下 左下）
分垂直半径和水平半径： border-radius: 水平半径 / 垂直半径;
八、width新增的属性值
width的属性值：
fill-available 合理分配有效剩余空间
fit-content 找子元素内容的宽度。按照子元素的宽度进行设置
max-content 找子元素最大的宽度
min-content 找子元素最小的宽度
注：width:100% 和 width:fill-available；有什么区别？？
对padding增加后的解析状态有影响。
九、calc计算
calc(100% - 200px)
十、css3事件
pointer-events:none;
1.阻止各种按钮（button\a）的功能 2.穿透遮罩层。