css3–box-shadow/border/background属性

css3

预处理器

less/sass cssNext 插件 按照插件定义的语法规则，写CSS，然后解析成css语法规则文件；
cssNext 用来实现一些未来的标准（未完全在各大浏览器实现的标准）

后处理器

autoprefixer 插件，编写CSS后，后处理器，会自动补齐一些兼容性的问题。

** postCss**工具，用js实现的css的抽象语法树，AST（Abstract Syntax Tree）。形成语法树，插件基于语法树进行编写。

当未来若不需要再考虑兼容为题的话，后处理器实现起来是更加容易进行维护的，因为，后处理器处理的就是我们已经写好的CSS文件，只是对其进行了兼容问问题上的补全，所以当我们不再考虑兼容问题的话，只需要不再使用后处理器即可，css文件依旧是原来的文件，更加容易维护。而预处理器是基于postCss生成的语法树，在一定的语法规则下重新编写的cass文件的css，当我们不需要考虑兼容问题的话，我们写的cass文件转换而成的css文件时不能直接使用的。

属性选择器

（一般不会用到）
< div class = “a b c”>

div[ class = “a”] { xxx}

div[ class ~= “a”]{ xxx},属性值存在独立的a的元素被选中;
div[ class |= “a”] 选中以a 开头 或者以a开头加上 – 的元素 如 a-b-c;
div[ class ^= “a”] 选中以a 开头；
div[ class $= “a”] 选中以a 结尾；
*div[ class = “a”] 选中存在a的元素；

伪元素选择器

<input type = \” text \” **placeholder = “请输入用户名” **>

input :: placeholder{color : red}
placeholder:目前只有颜色这一属性可以自己调，切有兼容性问题；

selection,改变鼠标选中字体后的样式，可设置三个属性：
color:
background-color:
text-shadow:(默认样式)

例：< span> 小刘
span :: selection { color ;xx}

伪类选择器

被选中的元素的一种状态

< div class = \”a \”>
< div class = \”b \”>
< div class = “c”>

div : not(.a) 选中除了class = \”a \” 以外的元素；
** ：root** 选中跟标签；
div.target 选中目标元素，从而影响其他元素；

13

13

13

需要考虑其他元素对其影响，不常用

div p : first-child，选中div下面的第一个P元素；
div p : last-child,选中div下面的最后一个元素
div p : only-child,选中div下面的唯一P元素，

div p : nth-child(2n-1),选中div下为奇数的P元素；
div p : nth-last-child(1),倒着数；

不需要考虑其他元素的影响

p.first-of-type,选中P元素中的第一个
p.last-of-type选中P元素中的最后一个
p.only-of-type,选中独有的P元素
p.nath-of-type(n)，
p.nath-of-tlast-ype(n)

p:empty
p:checked
p:enabled
p:disabled
p:read-only
p:read-write

border / background

** box-shadow**五个参数
box-shadow — 0px ( 水平偏移量) 0px （ 垂直偏移量 ）
0px ( 模糊值，基于边框原来位置向两边同时展开模糊 ) 0px ( 水平 垂直方向同时改变大小) #ccc ( 阴影颜色)

内阴影 box – shadow : inset 0 0 0 0 # 添加内阴影

border-image-source 可以填充图片；可以渐变；
linear-gradient( red, yellow) 线性渐变
radial-gradient 镜像渐变 ; 颜色渐变

border-image-slice:10 10 10 10 或者 10% 填数值，决定切割怎样背景 最后一个参数 fill ( 表示填充内容区 )

border-image-width auto( == slice+px // 1(==slice+px ))

border-image-repeat repeat / round / space / stretch( 默认 )

background-image

backfround-image : url() , url() /// ( 可放多张图片 ) ;

linear-gradient( red, yellow) 线性渐变

linear-gradient可传参数形式 （ to reght , red x, black x）// ( to reght top , red x , black x) // ( 90deg, red 50xp , black 100px )

** radial-gradient ** 射性渐变 ; 颜色渐变 （ circle x at top ( 0px ) left ( 50px), red black ）

x : closest-corner 最近的角 closest-side 边 farthest – corner 最远的角 farthest-side 边

repeating-linear-gradient
repeating-radial-gradient : background-image: repeating-radial-gradient(circle closest-side, #000, #fff 10%, #000 15%);

background-origin
填入值从哪里开（ border- box ( 默认值) padding-box content-box ）

background-position
从起始位置开始计算

background-clip （
图片从哪开始截断）border- box padding-box( 默认值) content-box text )

background-clip: text; ( 从文字部分开始截断图片 ) -webkit 私有化属性；
用法 ：

background-image : url(xxxx);
-webkit-background-clip : text;
background-clip : text;
-webkit-text-fill-color : transparent;
text-fill-color : transparent;

background-attachment

scroll 相对于盒子 视口定位( 默认值 ) // local 相对于内容区进行定位 // fixed 相对于屏幕视口定位

background-size
cover 用一张图片填充满容器 有可能溢出 一条边对其 另一条边大于等于容易的边// contain 找到一定比例自适应填充 一条边对其 另一条边小于等于容易的边

background-repeat
参数 repeat( 默认 ) // no-repeat // repeat-x // repeat-y // round （ 重复图片，会拉伸） // space ( 重复图片不拉伸，空白填充)

background-repeat : round space ; ( 可以这样传参数 ) ,而repeat不成这样传参

**border – color ** 如果没设置的情况下 会自动继承 color 的值，（ c1 c2） 而在c3之后规定，border-color 会通过 currentColor 中转。