Css3

1，属性选择器

其特点是通过属性来选择元素，具体有以下5种形式：

E[attr] 表示存在attr属性即可  ：  div[class]

E[attr=val] 表示属性值完全等于val； div[class=mydemo]

E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置； div[class*=mydemo]

E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置； div[class^=mydemo]

E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置；     div[class$=demos]

2，伪类选择器

:link、:visited、:hover、:focus、:active

以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类。

E:first-child 第一个子元素

E:last-child 最后一个子元素

E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素；

        n: 0,1,2,3,4。。。

        偶数： 2n even

        奇数：2n-1 odd

        前5个： -n+5

E：nth-last-child(3): 从后向前选择， 选中倒数第3个

E：empty 表示元素为空的状态

E:target: 表示元素被激活的状态  要配合锚点使用

3，伪元素选择器

        伪元素：通过css模拟出html效果

        E::before

        E::after  必须有content 属性

    伪元素选择器：

            E::first-letter　选中第一个字母

            E::first-line选中第一行

            E::selection: 表示选择的区域 通过设置 color  background

":" 与 "::" 区别在于区分伪类和伪元素

  关于before和after

      CSS2

中 E:before或者E:after，是属于伪类的，并且没有伪元素的概念

      CSS3

中 提出伪元素的概念 E::before和E::after，并且归属到了伪元素当中，伪类里就不再存在E:before或者   E:after伪类;

4，颜色

RGBA: red green blue (0-255) alpha: 透明度 （0-1）

 HSLA:

        H:色调  0-360

        S:饱和度 0%-100%

        L:亮度    0%-100%

        A：alpha 透明度 0-1

tip:在给父盒子设置了透明度之后，子盒子的透明度是不管用的

5，文本阴影

text-shadow，可分别设置偏移量、模糊度、颜色（可设透明度）。

1、水平偏移量正值向右负值向左；

2、垂直偏移量正值向下负值向上；

3、模糊度是不能为负值；

6，盒模型

     box-sizing 有两个值:content-box  border-box  

     content-box:对象的实际宽度等于设置的width值和border、padding之和

     border-box： 对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )

      box-sizing: border-box  盒模型

 7， 浏览器私有化前缀：

            -webkit-: 谷歌 苹果

            -moz-:火狐

            -ms-：ie

            -o-：欧朋

8，边框圆角

        border-radius:30px;

        border-radius:30px 40px 50px 60px;

        赋值规律： 从左上开始，顺时针赋值，如果这个角没有值 ，去对角；

        border-radius: 40px/60px;

椭圆设置

9， 边框阴影：

        box-shadow: 水平位移  垂直位移  模糊程度  阴影大小  阴影颜色  外/内阴影(inset)

       水平偏移量正值向右负值向左；

       垂直偏移量正值向下负值向上；

       模糊度是不能为负值；

        inset可以设置内阴影；

设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。可以设置多重边框阴影，实现更好的效果，增强立体感。

10，边框图片

 border-image: url("images/border.png") 27/20px round

        border-image//设置边框的背景图片.

        border-image-source:url(“”)//设置边框图片的地址.

        border-image-slice:27,27,27,27 //裁剪图片，如何去裁切图片，浏览器会自动去裁剪图片.

        border-image-width:20px;//指定边框的宽度.

        border-image-repeat:stretch;//边框平铺的样式  stretch拉升 

            round  会自动调整缩放比例

            repeat(重复)

12，渐变

linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果

Background:linear-gradient(

        To right 表示方向 (left,top,right,left   ,也可以使用度数)

         Yellow,  渐变起始颜色

        Green   渐变终止颜色

)

围绕中心点做渐变，半径是150px，从黄颜色到绿颜色做渐变.

13，过渡

倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。

14，动画

必要元素：

a、通过@keyframes指定动画序列；

b、通过百分比将动画序列分割成多个节点；

c、在各节点中分别定义各属性

d、通过animation将动画应用于相应元素；

关键属性

a、animation-name设置动画序列名称

b、animation-duration动画持续时间

c、animation-delay动画延时时间

d、animation-timing-function动画执行速度，linear、ease等

e、animation-play-state动画播放状态，running、paused等

f、animation-direction动画逆播，alternate等

g、animation-fill-mode动画执行完毕后状态，forwards、backwards等

h、animation-iteration-count动画执行次数，inifinate等

i、steps(60) 表示动画分成60步完成

15，伸缩布局

必要元素：

a、指定一个盒子为伸缩盒子display: flex

b、设置属性来调整此盒的子元素的布局方式例如flex-direction

c、明确主侧轴及方向

d、可互换主侧轴，也可改变方向

各属性详解

a、flex-direction调整主轴方向（默认为水平方向）

b、justify-content调整主轴对齐

c、align-items调整侧轴对齐

d、flex-wrap控制是否换行

e、align-content堆栈（由flex-wrap产生的独立行）对齐

f、flex-flow是flex-direction、flex-wrap的简写形式

g、flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

h、order控制子项目的排列顺序，正序方式排序，从小到大

16，多列布局

/* 分几列*/ -webkit-column-count:3;

/* 分割线*/ -webkit-column-rule:1px dashed red;

/*设置列间距*/ -webkit-column-gap:60px;

/* 列宽度*/ /*-webkit-column-width: 400px;*/

17，web字体