css3样式

Border-radius:给盒子增加圆角样式，只有两种px/%

扩展属性有四种，（先写上下。后写左右）

Border-top-left-radius:

Border-top-right-radius:

Border-bottom-left-radius:

Border-bottotm-right-radius:

Border-radius:分别有一个值（四个角），两个值（左上右下，左下右上），三个值（左上，左下右上，右下），四个值{左上，右上，右下，左下}，顺时针排列。

 

 

Box-shadow作用给盒子增加内外阴影的样式

Box-shadow:X轴 Y轴 阴影模糊值  阴影大小  色值   盒子内外；

Text-shadow:x轴  y轴 阴影大小  色值； 给文字增加 外阴影。

色值：十六进制、 rgb  rgba

盒子内外默认外阴影，内阴影inset；

 

 

Background-size:用来规定背景图片的尺寸。

值：

1、cover将背景图像等比例缩放到完全覆盖容器，背景图像有可能超出容器，将不再显示。

2、Contain  等比例缩放，只满足一边，将背景图像等比例缩放到与宽/高于容器的宽/高相等，背景图始终包含在容器中

3、X轴  Y轴 100% 100%  完全铺满容器的宽高。不会有溢出，缺点就是图片会变形。

 

 

Background-attachment：fixed；

简写的方式，可以写在background值得最后面；

作用：固定图形，并且随着滚动体一起改变图形。

 

 

 

 

伪类：

1、：first-child作用：向元素的第一个元素添加样式

例如：div  p:first-child   div的第一个p元素，在这种情况下。Div的第一个子元素必须是p。如果为其他元素，就将p换成其他元素。如果不对应，将不生效。这是有浏览器的渲染机制决定的，它是倒着验证。

2、：last-child  作用：向元素的最后一个元素添加样式。

3、：nth-child() 

作用：指向小括号中的第几个元素为它添加样式。从1开始计算

 

 

伪元素

1、：before 在元素的内容之前加入一个伪元素，与content：“”；样式合用，创造出一个内联元素， 例如在webmap中。给友情链接网站名字前面加图标。

2、：after  在元素的内容之后加入一个伪元素，与content：“”；样式合用，创造出一个内联元素。 例如在ul和li中，加入一个：after伪元素来清浮动ul:after{content:””;   clear:both;  height:0;  display:block;}

解析：content:””; 目的是为了让after后面的元素起作用。并且内容为空。

Display：block；目的是为了让伪元素可以接收到clear：both的作用。 因为clear：both；针对块元素。

Height：0；为了清空元素高度，同时兼容低版本的浏览器。

注：clear元素不可以为float或者position。

 

 

渐变色

线型渐变：

Background：（Linear-gradient：方向角度，色值  位置，色值 位置，.........） 色值；

在最后面添加一个色值，是为了防止低版本浏览器如果不能识别Css3的情况下，不至于没有颜色。

方向角度deg、带方向的单词left等

 

径向渐变

Background：（radius-gradient：中心位置，起点色值  位置，.........，终点色值 位置） 色值；

中心位置：1、带方向的词

2、百分比

3、Px像素

 

从黑色到透明，透明可以用rgba（0,0,0,0.6），也可以直接写transparent。

 

 

浏览器的内核不同，需要适应浏览器所需要添加的东西也不同。

 

谷歌：-webkit-

 

火狐：-moz-

 

IE：-ms-

 

Opera：-o-

 

 

 

 

 

Transition   过渡

 

Transition：语法（加在元素本身）（两个状态，一般与hover连用）

 

Transition：属性 持续时间 动画类型  延迟时间。

 

 

 

详解：属性的默认值是all.

 

持续时间为必写项。

 

动画的类型有

 

1、匀速运动。linear

 

2、平滑。Ease  由慢到快再到慢。

 

3、加速。Ease-in 

 

4、减速。 Ease-out

 

5、Ease-in-out 由慢到快再到慢。（变化的更加明显）

 

 

 

 

 

Transform  变形 用定位使其不影响布局

 

 

 

1、位移transform：translate（X轴的偏移值，Y轴的偏移值）

 

X轴位移transform：translateX（X轴的偏移值）

 

Y轴位移transform：translateY（Y轴的偏移值）

 

 

 

2、旋转transform：rotate（旋转的角度XXdeg）

 

 

 

3、缩放transform：scale（缩放比例 1.5）

 

X轴缩放transform：scaleX（缩放比例 0.5）

 

Y轴缩放transform：scaleY（缩放比例 2）

 

 

 

4、倾斜transform：skew（ x轴倾斜角度，y轴倾斜角度）

 

X轴倾斜transform：skewX（ x轴倾斜角度）

 

Y轴倾斜transform：skewY（ y轴倾斜角度）

 

注意：x轴表示水平方向向右为正。

 

Y轴  垂直方向向下为正。

 

 

 

 

 

K帧动画

 

Animation作用：用于给一个元素增加一个自定义动画效果。

 

Animation：动画名字  持续时间  动画类型  延迟时间  循环次数   

 

详解：其中，动画名字和持续时间为必写项。

 

@keyframes   动画名字{}作用：定义不同的百分比关键帧的样式。

 

Infinite：无限循环。

 

Transform-origin：0  200px； 更改中心点。

 

Animation-delay：动画延迟的时间。

 

 

 

 

 

Transition与animation的区别

 

Transition用于设定一个元素的两个状态，不同的状态可以用伪类，比如说hover。

 

Animation 用于设定一个元素的多个关键帧，【0%-100%】的不同样式，使它们产生一个过渡的效果。需要与@keyframes组合使用。

 

相对来说，transition是精简版的animation。它不需要鼠标触发。