Day12-CSS3

CSS3选择器：

1.属性选择器：通过属性，属性值，结构
	选择器[attr]{属性：属性值；} 匹配具有attr的元素
	选择器[attr="value"] 匹配具有attr的属性，并且属性值为value的元素
	选择器[attr^="value"] 以value开头的元素
	选择器[attr$="value"] 以value结尾的元素
	选择器[attr*="value"] 包含value的元素
	选择器[attr~="value"] 仅有value或者是词列表的元素
	选择器[attr|="value"] 仅有value或者以value-开头的元素
		attr:表示属性的意思；
		value:表示属性值；

2.结构伪类选择器：
	第一组：子元素
		:first-child 第一个子元素
		:last-child  最后一个子元素
		:nth-child(n)用于匹配索引值为n的子元素，自上而下
			n：参数：可以是数值，表达式
				even 偶数
				odd  奇数
		:nth-last-child(n) 匹配索引值为倒数第n个子元素
		:only-child	匹配父元素中仅有的子元素
		第一组结构伪类选择器特点：匹配的是父元素里所有的子元素，要求标签名和位置是匹配的才可以找到，父元素所有的标签名都参与计算
	第二组：同级兄弟元素
		:first-of-type	 同类型的中的第一个同级兄弟元素
		:last-of-type	 同类型的中的最后一个同级兄弟元素
		:nth-of-type	 同类型的第n个同级兄弟元素，自上而下
		:nth-last-of-type 同类型中倒数第n个兄弟元素
		:only-of-type	  同类型的唯一一个同级兄弟元素
		第二组结构伪类选择器特点：同级的相同的兄弟元素中的第几个

3.UI元素状态伪类选择器：应用在表单元素里
		:enabled 	可用状态
		:disabled	禁用状态
		:checked	选中状态
		:focus		焦点
		:read-only	只读状态
		:read-write	可编辑表单
	取消复选框的默认样式属性:
		appearance:none;

4.目标伪类选择器
	:target 匹配url所指向的目标元素
	配合锚点链接使用；

5.:root伪类选择器
	匹配根元素html

6.:empty伪类选择器
	匹配无内容元素
7.::selection伪元素选择器
	匹配元素处于高亮状态
	注：必须是双冒号
		只能设置背景色和文本颜色

浏览器前缀：

	IE		-ms-
	firefox -moz-
	safair	-webkit-
	Chorme	-webkit-
	opera	-o-

CSS3属性：

1.文本边框属性：text-stroke:width color;
		width：边框宽度
		color：边框颜色
	说明：该属性需要加前缀-webkit-text-stroke
2.文本阴影属性：text-shadow: x y blur color;
		x：水平方向的位置，数值加单位
		y：垂直方向的位置，数值加单位
		blur：模糊程度，数值加单位，默认0
		color：阴影颜色(可选的，默认黑色)
	说明：
		x和y是必须有的，可以设置多个阴影，用逗号隔开
		多阴影之间有层级关系，先写的层级最高
3.设置字体：@font-face：
	语法：@font-face{
			font-family:"iconfont";
			src:url('iconfont.ttf') format('truetype');
		}
4.字体图标的设置
	使用字体图标的方法一：Unicode

	使用字体图标的方法二：class方法
		1.引入iconfont.css
		2.先设置class="iconfont"名，在class中添加使用图标的名称iconfont-gerenzhongxin
			例：<i class="iconfont iconfont-gerenzhongxin"></i>

	使用字体图标的方法三：js方法
		1.先引入js文件

背景属性：

1.背景原点属性：初始位置
	background-origin:;
		padding-box 在padding区显示，默认值
		border-box  在border区显示
		content-box	在content区显示

2.背景裁剪属性：
	background-clip:;
		padding-box 在padding区以外的被裁剪
		border-box  在border区以外的被裁剪，默认值
		content-box	在content区以外的被裁剪
		text		在文本以外的被裁剪，需要加前缀

3.背景尺寸属性：
	background-size:;
		px	一个值：宽度，高度等比例缩放   两个值：宽度 高度
		%	根据元素显示%大小，
		cover   背景图完全覆盖背景区域
		contain 高度或宽度完全自适应

4.背景的复合属性：
		background: #0f0 url() no-repeat center top/size origin clip;
		复合属性是background-size和background-origin和background-clip位置不能互换

5.多背景设置：
	background:url() no-repeat,url() no-repeat right top,
	url() no-repeat left bottom,url() no-repeat right bottom,url() no-repeat center;
	多背景设置时用逗号隔开，先写的层级最高；

滤镜：

模糊滤镜：blur
	filter:blur(数值);
黑白滤镜：grayscale
	filter：grayscale(0%-100%);

圆角属性：

圆角属性：
	border-radius:;
		单一设置：
			border-top-left-radius:;左上角
			border-top-right-radius:;右上角
			border-bottom-left-radius:;左下角
			border-bottom-right-radius:;右下角
		复合设置：
			border-radius:1; 四个角的值相等
			border-radius:1 2; 左上和右下 ，右上和左下
			border-radius:1 2 3; 左上 ，右上和左下 ，右下
			border-radius:1 2 3 4;左上 ，右上 ，右下 ，左下
		分别设置x和y的角的弧度：
			border-radius:x1 x2 x3 x4 / y1 y2 y3 y4;

width属性：

width的属性值：
	max-content根据最大内容显示
	min-content根据最小内容显示

calc()方法：四则远算

可以实现不同单位的值进行计算
注：
	1.运算符前后要有空格
	2.乘和除要是用倍数参与计算