css3选择器，背景，边框属性

css3动画实现效果，推荐大神博客
https://www.cnblogs.com/lhb25/p/must-read-links-for-web-designers-and-developers-volume-36.html

**css3注意：**兼容性问题，

prefix（前缀）	浏览器（browser）
-webkit-	Chrome & Safari
-moz-	Firefox
-ms-	IE
-0-	Oprah

注：360浏览器有两种模式对应内核不同，兼容模式（IE，Chrome），极速模式（Chrome）

写法

-moz-border-radius{}
-o-border-radius{}
-ms-border-radius{}
-webkit-border-radius{}

css3选择器（自定义为常用选择器）

关系型选择器	描述
A+B	后一个满足条件的兄弟元素节点，必须是紧挨着的
A~B	后一堆满足条件的兄弟元素节点

属性选择器	描述
A[attr~=‘a’]	属性值被a隔开的即可
A[attr l=‘a’]	属性值为a 或者a-开头
A[attr^=‘a’]	属性值以a开头
A[attr$=‘a’]	属性值以a结尾
A[attr*=‘a’]	属性值含有a

伪元素选择器	描述
A:first-letter	A当中的第一个字
A:first-line	A当中的第一行
A::selection	当A被选中时添加的样式
A:before	可理解为系统默认添加在A前面的行内元素
A:after	可理解为系统默认添加在A后面的行内元素
A::placeholder	选中input下的placeholder属性值

伪元素选择器	描述
A:not(s)	选中不含有s的A标签，s可以为属性例如[class=“a”]，也可以用. a
A:root 根元素的意思	在HTML中，root等于html ，:root == html
A:first-child	A必须是父级元素中的第一个才能被选中
A:last-child	A必须是父级元素中的最后一个才能被选中
A:only-child	A必须是父级元素中的唯一的一个才能被选中
A:nth-child(n)	必须是父级元素下的第n位A标签
A:nth-last-child(n)	父级元素下的倒数第n位A标签
A:first-of-type	父级元素下的第一位A标签（不必是父级元素的第一位子节点）
A:last-of-type	父级元素下的最后一位A标签（不必是父级元素的最后一位子节点）
A:only-of-type	父级元素下的唯一的一位A标签（不必是父级元素的第一位子节点）
A:nth-of-type(n)	父级元素下的第n位A标签（不必是父级元素的第n位子节点）
A:nth-of-last-type(n)	父级元素下的倒数第n位A标签（不必是父级元素的倒数第n位子节点）
A:empty	匹配没有任何子元素（包括text节点）的元素A
A:checked	匹配用户界面上处于选中状态的元素A。(用于input type为radio与checkbox时)
A:enabled	匹配用户界面上处于可用状态的元素A
A:disabled	用于选中标签属性设置disabled后为禁用状态的标签A
A:target	:target选择器用于选取当前活动的目标元素。(当A做为锚点被访问时被选中)
A:read-only	当A标签设置属性readonly="true"时，A被选中（readonly为只读状态）
A:read-write	:read-write 选择器选取没有设置 “readonly” 属性的元素

拓展： 标签为 input 元素定义标注（标记），理解将下的input与下的其他节点绑定在一起

引用
链接:http://caibaojian.com/css3-properties.html

背景

CSS3新增了几个关于背景的属性，分别是background-clip、background-origin、background-size和background-break。

background-clip
background-clip属性用于确定背景画区，有以下几种可能的属性：

background-clip: border-box; 背景从border开始显示
background-clip: padding-box; 背景从padding开始显示
background-clip: content-box; 背景显content区域开始显示
background-clip: no-clip; 默认属性，等同于border-box
通常情况，背景都是覆盖整个元素的，利用这个属性可以设定背景颜色或图片的覆盖范围。

background-origin
background-clip属性用于确定背景的位置，它通常与background-position联合使用，可以从 border、padding、content来计算background-position（就像background-clip）。

background-origin: border-box; 从border开始计算background-position
background-origin: padding-box; 从padding开始计算background-position
background-origin: content-box; 从content开始计算background-position
background-size
background-size属性常用来调整背景图片的大小，主要用于设定图片本身。有以下可能的属性：

background-size: contain; 缩小图片以适合元素（维持像素长宽比）
background-size: cover; 扩展元素以填补元素（维持像素长宽比）可能会溢出
background-size: 100px 100px; 缩小图片至指定的大小
background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包 含元素的尺寸

background-break
CSS3中，元素可以被分成几个独立的盒子（如使内联元素span跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示。

边框阴影

盒子阴影：box-shadow
[]内为可选，可不选
box-shadow：阴影x坐标 阴影y坐标 模糊度 [阴影大小] 阴影颜色 [inset]；
inset 定义元素的阴影类型为内阴影。该值为空时，则元素的阴影类型为外阴影;
阴影大小为边框的延伸宽度
box-shadow可以设定多组阴影效果，每组参数值以逗号分隔
例子：

box-shadow: 0px 0px 300px #fad,
					20px 0px 300px #ffa,
					-30px  20px 300px #f00,
					40px 20px 3000px #dad,
					inset 0px 0px 150px #fff,
					inset 0px  50px 50px #00f,
					inset  -20px  30px 180px  #f00;

内容延伸：
文字阴影：text-shadow

text-shadow：X Y 阴影模糊值 color;

例子：

    text-shadow: 0 0 5px #fff,
    0 0 20px #fefcc9,
    10px -10px 30px #feec85,
    -20px -20px 40px #ffae34,
    20px -40px 50px #ec760c,
    -20px -60px 60px #cd4606,
    0 -80px 70px #973716,
    10px -90px 80px #451b0e;

效果：

边框圆角

border-radius：

斜杠二组值：
第一组值表示水平半径，
第二组值表示垂直半径，
每组值也可以同时设置1到4个值，规则与上面相同。
四个属性值，分别表示左上角、右上角、右下角、左下角的圆角大小（顺时针方向）

例子：

.egg{

  width: 120px;

   height: 160px;

   background: #EC0465;

   border-radius: 60px 60px 60px 60px/100px 100px 60px 60px;

}

边框照片

引用：https://segmentfault.com/a/1190000010969367?utm_source=tag-newest
border-image
border-image-source：url(); 路径

图片剪裁位置border-image-slice
border-image-slice： 用百分比或正整数指定图像分割的位置；
该属性指定从上，右，下，左 4 个方位来分割图像，将图像分成4个角，4条边和中间区域共9份，中间区域始终是透明的（即没图像填充），除非加上关键字fill。
裁切方式是向内进行切割

边框图片九个区域与元素九个区域一一对应，也就是边框图片的相应部位就应用于元素的相应位置。
fill关键字如果存在的话，将会保留border-image中间的部分（预设是丢弃中间部分，留空处理）。

例子：

图片的尺寸是81(27*3)像素

border-image-slice:27px 27px 27px 27px；

第一个27px是从图片上边缘向内27px进行切割。

第二个27px是从图片右边缘向内27px进行切割。

第三个27px是从图片下边缘向内27px进行切割。

第四个27px是从图片左边缘向内27px进行切割。

重复性border-image-repeat
border-image-repeat：stretch（拉伸） | repeat（重复） | round（平铺） | space

stretch： 将被分割的图像使用拉伸的方式来填充满边框图像区域。
repeat： 将被分割的图像使用重复平铺的方式来填充满边框图像区域。当图像碰到边界时，如果超过则被截断。
round：当背景图像不能以整数次平铺时，会根据情况缩放图像。
space： 当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围。

注意： round会凑整填充（进行了适度的拉伸）。repeat不进行拉伸，不凑整

*下图(27×3)px (27×3)pxpng 做实验

width: 400px;
height: 115px;
border-image: url(border.png) 27；
border-image-repeat：stretch；

如下

border-image: url(border.png) 27；
border-image-repeat：round；
如下

border-image: url(border.png) 27；
border-image-repeat：repeat；
如下

边框背景宽度border-image-width：
该属性用于指定使用多厚的边框来承载被裁剪后的图像。

值为不带单位的数字时它表示 border-width 的倍数
使用 auto， border-image-width 将会使用 border-image-slice 的值
使用百分比时参照图像边框区域的大小（包含border和padding）进行换算

例子：

border: 3em double orange;
border-image: url(border.png) 27 round;
border-image-width: 6rem;

如下图：

边框背景扩散border-image-outset

border-image-outset：
相当于把原来的图片位置向border外延伸。
如下图：