css3的一些小知识点

css3

input:disable 表单元素不可用状态
input:enable 表单元素可用状态
input:checked 单选或者多选被选中时（可改变选中之后的样式）

li:first-child li列表的父元素的第一个子元素，如果第一个元素不是li就不会被选中
li:first-of-type 选择li列表父元素的第一个是li的子元素
li:last-child li:last-of-type(同上first)
li:nth-child(1) 这里是从第一个开始算，父元素第一个元素是li子元素，如果不是不选中
li:nth-of-type(1) 这里是从第一个开始算，父元素第一个li子元素

:empty 匹配没有子元素的元素
span:only-child span是唯一子元素的
span :only-of-type(同上）

div:not(.div1) 否定味伪类择器
.div2::first-letter 首字母伪元素（两个冒号）
.div2::selection 被用户选中的内容

盒模型
box-sizing:border-box 怪异盒模型
textarea{
resize:none; 禁止修改文本域大小
}

背景属性
background-clip:border-box; 根据边线剪切
background-clip:content-box; 根据内容剪切
background-clip:padding-box; 根据padding剪切
background origin 规定背景图片的定位区域
background-size 规定背景图片法人尺寸

css3多列布局
1、column:是一个复合属性，包含column-width环绕column-count这两种简写。意为同事设置分列列数和分列宽度（分成四列，每列宽度自适应 columns：auto 4；）
2、column-width：用于设置每列的宽度（最小宽度）
3、column-count：用于设置多少列
4、column-gap：用于设置列间距（-moz-column-gap:100px;）
5、column-rul：设置每列中间的分割线（column-rule：2px solid gary;）

css边框线
border-radius：圆角
box-shadow： h-shadow、 v-shadow、 blur、 spread、 color、 inset;
v-shadow :必需。垂直阴影的位置。允许负值。
h-shadow: 必需。水平阴影的位置。允许负值。
inset： 可选。将外部阴影 (outset) 改为内部阴影。
color: 可选。阴影的颜色。请参阅 CSS 颜色值。
spread: 可选。阴影的尺寸。
blur: 可选。模糊距离。

border-image:图片创建边线
1、border-image-source：用在边框图片的路径
2、border-image-slice：图片框向内偏移
3、border-image-width：图片边框的宽度
4、border-image-outset：边框图像区域超出边框的量
5、border-image-repeat：图像边框是否应平铺repeated、铺满rounded或拉伸stretched
css文本

| word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行。
| word-break | 规定非中日韩文本的换行规则。 |
| text-overflow | 规定当文本溢出包含元素时发生的事情。 |
| text-shadow | 向文本添加阴影。 |
| text-wrap | 规定文本的换行规则。 |
| text-justify | 规定当 text-align 设置为 “justify” 时所使用的对齐方法。 |
| text-outline | 规定文本的轮廓。 |
| text-emphasis | 向元素的文本应用重点标记以及重点标记的前景色。 |
hanging-punctuation | 规定标点字符是否位于线框之外。 |
| punctuation-trim | 规定是否对标点字符进行修剪。 |
| text-align-last | 设置如何对齐最后一行或紧挨着强制换行符之前的行。 |

css3渐变
1、线性渐变
background:linear-gradient(to bottom,red,yellow);
第一个参数可指定的参数值如下：
参数值 渐变方向
to bottom 从上往下
to right 从左往右
to top 从下往上
to left 从右往左

第二个参数和第三个参数分别表示渐变的起点色和终点色。
repeating-linear-gradient(red, yellow 10%, green 20%);

2、径向渐变
background:radial-gradient(red,yellow);
第一个参数和第二个参数分别表示渐变的起点色和终点色。

background:radial-gradient(circle at left top,red,yellow);