css选择器、渐变、阴影、字体

零散的要点：
	1. 在textarea标签中`overflow:auto`：当文字超出边界时，自动添加上滚动条，如果没有，则滚动条消失

CSS选择器

关系选择器

选择符	类型	简介	举例说明
E F	包含选择器	选择所有被E元素包含的F元素
E>F	子选择器	选择所有被E元素包含的子F元素
E+F	相邻选择器	选择紧贴着E元素的F元素
E~F	兄弟选择器	选择E元素所有兄弟元素F

伪类选择器

选择符	简介
E:root	匹配E元素在文档的根元素
E:first-child	匹配父元素的第一个子元素且该元素是E元素
E:last-child	匹配父元素的最后一个子元素且该元素是E元素
E:only-child	匹配父元素仅有的一个子元素且该元素是E元素
E:nth-child(n)	匹配父元素的第n个子元素且该元素是E元素。n可以取某一个具体值，也可以写公式（eg:2n+1）/ even(偶数) / odd（奇数）
E:nth-last-child(n)	匹配父元素的倒数第n个子元素且该元素是E元素
E:first-of-type	匹配父元素的子元素中的第一个E元素
E:last-of-type	匹配父元素的子元素中的最后一个E元素
E:only-of-type	匹配父元素的子元素中的唯一一个E元素(不一定只有E元素，但一定只有一个E元素)
E:nth-of-type(n)	匹配父元素的子元素的的第n个E元素
E:nth-last-of-type(n)	匹配父元素的子元素的倒数第n个E元素
E:empty	匹配没有任何子元素的E标签（连文字都不能有）
E：checked	匹配用户界面上处于选中状态的E元素
E：enabled	匹配用户界面上处于可用状态的E元素
E：disabled	匹配用户界面上处于禁用状态的E元素

属性选择器

选择符	描述
E[attr]	选择是E元素且有attr属性的元素
E[attr="值"]	选择是E元素、有 attr属性，且attr=“值”
E[attr~="exp"]	选择是E元素，有attr属性，且attr取值中有包含exp（exp必须是一个完整的名字）的元素
E[attr$="exp"]	选择是E元素，有attr属性，且attr取值以exp（exp不一定是一个完整名字）结尾的元素
E[attr|="exp"]	选择是E元素，有attr属性，且attr取值以exp(exp必须是一个完整的名字)开头/选择attr取值以exp-开头的元素
E[attr^="exp"]	选择是E元素，有attr属性，且attr取值以exp（exp可不是一个完整的名字）开头的元素
E[attr*="exp"]	选择是E元素，有attr属性，且attr取值中包含exp（exp不一定是一个完整的类名，可以是完整名字的一部分）的元素

伪对象选择器

选择符	描述
E:first-letter	选中E对象的第一个字符	该选择符以及该选择符以下的都可以用:/::
E:first-line	选中E对象的第一行
E:before	给E对象前加上其中的content内容，其中的所有样式都属于content的内容
E:after	给E对象后加上其中的content内容，其中的所有样式都属于content的内容

注意：
1. E:before和E:after的样式内容必须包含content字段。content字段可取图片，也可取文字。
2. 当未给E:before和E:after设置定位时，给E:before和E:after是属于E的一部分的，即给E设置padding/margin时，E:before/E:after也属于E的内容的一部分
3. 当给E:before和E:after设置定位时，给E设置padding/margin时，会影响E:before/E:after和E之间的距离

css3边框

一、border-radius

二、 阴影

box-shadow：横轴距离 纵轴距离 阴影的模糊度 阴影的模糊距离 颜色 阴影内置/外置

属性	描述	取值
阴影内置/外置	阴影向外/阴影向内	outset/inset

box盒子的阴影

text-shadow：横轴距离 纵轴距离 模糊距离 颜色
text文本的阴影

三、 边框图片

注意：当要加边框图片时，需要设置边框大小，且要设为透明，否则边框图片无效

border-image：图片地址 图像边界向内偏移 图像边界的宽度 边框图像区域超出边框的量 是否重复
border-image：source slice width outset repeat

属性	描述	取值
repeat	平铺(repeated)、铺满(rounded)或拉伸(stretched)

背景

背景定位位置background-origin

取值	描述
border-box	背景从border处开始平铺（默认）
content-box	背景从content处开始平铺
padding-box	背景从padding边处开始平铺

背景图片大小background-size

背景图片大小可设置背景图片的宽和高，以（宽，高）顺序设置

取值单位	描述
像素
百分比

背景图片裁切background-clip

该属性与`backgroun-origin`的不同在于：
	该属性无论取何值都是从border处进行平铺的，而	`background-origin`三个不同取值时从不同边界处平铺的

取值	描述
border-box	从border边界处裁剪
padding-box	从padding边界处裁剪
content-box	从content边界处裁剪

多背景

注意：背景的url和背景图片大小设置是一一对应的，并且哪个图片的url越靠前，其z-index越大。则其不会被遮盖

渐变

渐进增强：先写各个内核的，再写基础
优雅降级：先写基础，再写内核

线性渐变

注意：
	1. 该属性不同浏览器识别方式不同
	2. 在方向属性中，-webkit该取值为起始方向。-o/-moz为终止方向，基本的:to 终止方向
	3. background:linear-gradient:red 10%,yellow 85%,blue 90%  :10%以前都是红色，10%~85%是红黄过渡，85%~90%是黄蓝过渡。90%以后都是蓝色

background:linear-gradient(方向，color1 color1所占百分比，color2 color2所占百分比...)

方向:（默认从上到下渐变）

属性
可取lerft,right,top,bottom/
可取对角值：left top,left bottom…（若想从左上向右下渐变，先写左或者先写上都可）
可取角度（以下图为标准）：0deg,90deg,180deg,-90deg…

color

color可以使用透明度：
	1. rgba( , , , 透明程度)：0代表完全透明，1代表不透明
	2. rgba取三个255代表白色，三个0代表黑色，除这两个外，其余任意取三个相同值都是灰色。
	3. （255，0，0）代表是红色（red=255,green=0,blue=0）类似的 ：（0，255，0）是绿色，（0，0，255）是蓝色

重复线性渐变

repeating-linear-gradient

eg:background:linear-gradient:red 10%,yellow 35%,blue 50% :10%以前都是红色，10%_{35%是红黄过渡，35%}50%是黄蓝过渡。50%以后继续重复之前的颜色以及过渡

:) 在重复线性过渡中，第一个颜色不能有所占比例，否则其他颜色会对第一个颜色有所覆盖

径向渐变

默认椭圆从内向外渐变

background:radial-gradient(中心点，形状 设置靠近位置 ，color1 color1所占比例，color2 color2所占比例...)

中心点

取值
center（默认）
百分比（横轴，纵轴）
真实像素（横轴，纵轴）

shape

取值
circle（圆形）
ellipse(椭圆形)

size

:) size取什么值则以该值为参考点，给设置的几个颜色进行平均分配

取值	描述
closest-side	最近的边
closest-corner	最近的角
farthest-side	最远的边
farthst-corner	最远的角

eg:radial-gradient(60% 50%,circle closest-side,red,blue,green):中心点在宽的60%，高的50%处，以圆形向外渐变，closest-side代表以最近的边为参考点，三个颜色均匀分配，而其余颜色是否均匀分配没有关系

重复径向渐变

重复径向渐变时，必须要给内部一个确认的颜色，否则外部的颜色会把内部的颜色覆盖掉

background:repeating-radial-gradient(...)

eg: background:-webkit-repeating-radial-gradient(circle closest-side,red,green 20%,blue 50%);

若：background:-webkit-repeating-radial-gradient(circle closest-side,red 10%,green 20%,blue 50%);

则外部蓝色会把内部红色覆盖掉

字体

字体图标

（以阿里巴巴字体图标为例）
步骤：1. 从官网上下载字体图标
	 2. 将字体图标代码拷贝到自己的工程中
	 3. 将字体图标的`iconfont.css`引入到工程中
	 4. 给工程中加入任意标签，给该标签的clas设为`iconfont`，
	 5. 在该标签内写入字体图标代码中的属于该图标的字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="font_6kj0x30sgh4/iconfont.css" rel="stylesheet"><!--引入该字体图标样式-->
</head>
<body>
      <span class="iconfont">&#xe645;</span><!--&#xe645;为该字体图标的字符串-->
</body>
<html>

自定义字体

@font-face{
	font-family:"名称"
	src:url("字体地址")
}
Ettr{<!--Ettr为某一选择器名字-->
<!--font:字体名称-->
	font-family:字体名称
	
}

多列（不同浏览器有不同的适应方式）

:) 按照  总宽度-每一列之间的距离  将页面分成n列，将一个标签内的内容均分成n列。每一列站页面的一列

属性	描述
column-count	分成几列
column-gap	每一列之间的距离
column-rule	每一列之间的间隔线

textarea->放大内容

给textarea标签加下列样式：

属性	描述	取值
max-width	可拉伸的最大宽度
max-height	可拉伸的最大高度
resize	是否允许拉伸	none/verticle(竖直拉伸)/both/horizontal(水平拉伸)