css3新增属性总结-01

Day28
1、 文本阴影属性
Text-shadow: x轴位置 y轴位置 阴影大小 阴影颜色；

注：如果想添加多个阴影，每一组阴影以后好分隔。

2、 盒子阴影属性
Box-shadow: x y 阴影的模糊度 阴影扩散的大小 阴影颜色 内阴影（inset可选）;

添加多阴影：以逗号分隔的形式添加多阴影。

3、 文字换行
英文或者数字默认显示：如果没有换行的情况下，浏览器会尝试把下一个长单词放在下一行显示。

Word-wrap:break-word;
功能：尝试把长单词换到下一行显示。如果在下一行仍然有超出的情况，自动断句。

Word-break:break-all;
功能：粗暴的断句。

4、 字体图标
@font-fact:;
@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体（@font-face这个功能早在IE4就支持）
@font-face的语法规则:
@font-face {
font-family: ;
src: [][, []]*;
[font-weight: ];
[font-style:

5、 背景属性
a. Background-origin:背景图的起始位置
Padding-box; 默认值（padding区域开始）
Border-box; 边框后面开始
Content-box; 从内容区域开始
b. Background-clip:; 背景的裁切（只显示那个区域的背景）
Border-box; 默认值
Padding-box;
Content-box;
c. Background-size:; 控制背景图的大小
属性：宽度 高度
属性值的数值：
10px 10px;
100% 100%;
Cover 按照背景图的比例放大到全部平铺在元素后面则停止；
Contain 按照盒子比例放大，当宽或者搞，达到容器最高则停止；

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

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

6、 颜色模式
1、rgba 颜色模式
2、 Hsl 颜色模式（了解）
3、 Hsla 颜色模式（了解）
就是色调(Hue)、饱和度(Saturation)、亮度(Lightness)三个颜色通道的改变以及它们相互之间的叠加来获得各种颜色，色调(Hue)色调最大值360，饱和度和亮度有百分比表示0-100%之间。

7、 图片边框
图片边框：把一张图片，当作一个边框显示。

Border-image:; 简写
Border-image-source 边框图片路径
Border-image-slice 图片边框向内偏移（不加单位）。【把图片切割成九宫格】
Border-image-repeat 图像边框是否应平铺（repeat）、铺满（round）、拉伸（stretch 默认）

Border-image-outset 边框向外偏移

8、 圆角
Border-radius:半径;
一个值：四周圆角；
两个值：左上角及右下角 右上角及左下角
三个值：左上角 右上角及左下角
四个值：从左上角开始 顺时针设置（左上 右上 右下 左下）

分垂直半径和水平半径：
Border-radius:水平半径/垂直半径

9、 width新增属性
width属性值：
fill-available 合理分配有效剩余空间
fit-content 找子元素内容的宽度，按照子元素的宽度进行设置
max-content 找子元素最大的宽度
min-content 找子元素最小的宽度

面试题：
Width:100%; 和width:fill-available; 有什么区别？？
对padding增加后的解析状态有影响。

10、 calc属性
calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

calc()能做什么？
calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。

calc()语法
calc()语法非常简单，就像我们小时候学加 （+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示：

.elm {
	width: calc(expression);
}
其中"expression"是一个表达式，用来计算长度的表达式。

calc()的运算规则
calc()使用通用的数学运算规则，但是也提供更智能的功能：

使用“+”、“-”、“*” 和 “/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算；
表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

浏览器的兼容性
浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器还没仅有“firefox for android 14.0”支持，其他的全军覆没。
大家在实际使用时，同样需要添加浏览器的前缀
.elm {
/Firefox/
-moz-calc(expression);
/chrome safari/
-webkit-calc(expression);
/*Standard */
calc();
}

11、 css3事件
pointer-events:none;
组织各种按钮（button/a）的功能
穿透遮罩层。

阻止用户的点击动作产生任何效果
阻止缺省鼠标指针的显示
阻止CSS里的 hover 和 active 状态的变化触发事件
阻止JavaScript点击动作触发的事件
提交页面，提交按钮点击后，添加这个样式属性（style=“pointer-events”），来防止重复提交。
一些层的绝对定位，覆盖按钮，穿透可以点击它。