Css3 常用选择器 背景 边框 渐变

选择器：
Ele~ele2: 选择Ele 后面的ele2标签

p~ul{background:#ff0000;} //为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景：

Ele[key(^$*)=value] 选择对应的元素（^开头,﹩结束*包含）

div[class^="test"]{background:#ffff00;} //设置 class 属性值以 "test" 开头的所有 div 元素的背景色：

Ele[key=value] 选择 target=”_blank” 的所有元素。

a[target=_blank]{ background-color:yellow;} //为 target="_blank" 的 <a> 元素设置样式：

:root 文档的根元素

body:root{ background:#ff0000;} //设置 HTML 文档的背

:empty 选择文档中的 所有空元素

p:empty{ background:#ff0000;} //指定空的 p 元素的背景色：

:target 选择 **的元素（#sss）

p:target{ border: 2px solid #D4D4D4;background-color: #e5eecc;} //突出显示活动的 HTML 锚：

:disabled 选择每一个禁用的输入元素

input[type="text"]:disabled{ background-color: #dddddd;} //为所有 type="text" 的被禁用的 input 元素设置背景色：

:enabled 选择每一个已启用的输入元素

input[type="text"]:enabled{ background-color: #ff0000;} //为所有 type="text" 的已启用的 input 元素设置背景色：

:checked 选择每个选中的输入元素

input:checked{ background-color: #ff0000;} //为所有被选中的 input 元素设置背景色：

:not() 选择每个并非p元素的元素

body:not(p){ background-color: #ff0000;} //设置非 <p> 元素的所有元素的背景色：

::selection 匹配元素中被用户选中或处于高亮状态的部分

::selection{color:#ff0000;}
::-moz-selection{color:#ff0000;}   //使被选中的文本成为红色：

:out-of-range 匹配值在指定区间之外的input元素

input:out-of-range{ border:2px solid red;} //输入的值在指定区间外时，设置指定样式:

:in-range 匹配值在指定区间之内的input元素

input:in-range{ border:2px solid yellow;} //输入的值在指定区间内时，设置指定样式:

:read-write 用于匹配可读及可写的元素

input:read-write{ background-color: yellow;} //如果 input 元素不是只读，即没有 "readonly" 属性，设置输入框样式为黄色:

:read-only 用于匹配设置 “readonly”（只读） 属性的元素

input:read-only{ background-color: yellow;} //如果 input 元素设置了 "readonly" 属性，设置输入框样式为黄色:

:optional 用于匹配可选的输入元素

input:optional{ background-color: yellow;} //如果 input 元素没有设置 "required" 属性，设置其为黄色:

:require 用于匹配设置了 “required” 属性的元素

input:required{ background-color: yellow;} //如果 input 元素设置了 "required" 属性，设置其为黄色:

:valid 用于匹配输入值为合法的元素

input:valid{ background-color: yellow;} //如果 input 元素中输入的值为合法的，设置其为黄色:

:invalid 用于匹配输入值为非法的元素

input:invalid{ border:2px solid red;}  //如果 input 元素中的值是非法的，设置样式为红色：

Background系列属性
background-origin：设置背景图片的原点
值：border-box(背景图像边界框的相对位置)
padding-box( 背景图像填充框的相对位置)
content-box(背景图像的相对位置的内容框)

div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box; //内容框相对定位的背景图片
}

Background-clip: 裁切图片容器里面内容
值同上：border-box padding-box content-box

div
{
background-color:yellow;
background-clip:content-box;
}

Background-attachment:设置背景图片 是否随着滚动
值：scroll 背景图片随页面的其余部分滚动。这是默认
fixed 背景图像是固定的
inherit 指定background-attachment的设置应该从父元素继承

body
{ 
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}

Border:
Border-image:设置 边框背景图的全部
Border-image-resource:边框图片的路径
Border-image-slice:裁切图片的位置 上右下左 与margin padding类似只设置两个参数垂直 水平

div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;   //指定图像的边界向内偏移
}

border-image-width：可以直接设置 边框图片的宽度 不受到边框宽度的影响

div
{
border-image-source: url(border.png);
border-image-width: 30 30;  //指定图像边界的宽度：
}

border-image-outset：设置边框图片 向外扩展的距离 与父容器显示内容有关系

div
{
    border-image-source: url(border.png);
    border-image-outset: 30 30;
}

border-image-repeat：裁切之后 如果不是整个图片 会重复 或者 拉伸多于出来的这一部分

div {
    border-image-source: url(border.png);
    border-image-repeat: repeat;
}

box-shadow：盒子的阴影 颜色 X Y 模糊的范围 可以设置多组

div
{
    box-shadow: 10px 10px 5px #888888;
}

Text-shadow:设置文本的阴影

h1
{
    text-shadow: 2px 2px #ff0000;
}

Word-break:是否把一个单词 分开换行
值：normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。

p.test {word-break:break-all;}

Word-wrap:是否 把一个长单词 分开
值：normal 只在允许的断字点换行（浏览器保持默认处理）。
break-word 在长单词或 URL 地址内部进行换行。

p.test {word-wrap:break-word;}

设置渐变
线性渐变：linear-gradient：（角度、方向，第一个颜色 百分比，第二个颜色 百分比 。。。）

#grad1 {
  /* Safari 5.1 to 6.0 */
  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Opera 11.1 to 12.0 */
  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Firefox 3.6 to 15 */
  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* 标准语法 */
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

径向渐变：radial-gradient：形状 半径大小 方向，颜色1,颜色2…

#grad {
  background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1- 6.0 */
  background: -o-radial-gradient(red, green, blue); /* Opera 11.6-12.0 */
  background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6-15 */
  background: radial-gradient(red, green, blue); /* 标准语法 */
}