关于css3

1.选择器：

属性选择器：[];

查找条件：属性；我们可以通过属性来查找[^=][$=][*=][=][attr]

伪类选择器：  ：：；

：：before；：：after；

必须指定一个content：新添加的元素是一个行内元素。

尽量使用单冒号：before   ：after

2.文字阴影：text-shadow：2px 2px 5px 5px red;

3.边框：

边框圆角：border-radious：10px 10px 10px 10px；

border-radius：10px；

border-radius：10px 20px：对角线

border-radius：10px 20px 30px；

边框阴影：box-shadow：2px 2px 5px blue；

box-shadow：insert 2px 2px 5px blue;内阴影；

边框图片：border-image-source：url（）；

border-image-slice：22 22 22 22；

border-image-repeat：round stretch repeat；

border-image-width：30px；

4：盒模型

padding+content+border；

css3改变了这种计算方法：

width css设置的宽度：

当设置box-sizing：border-box；

width=盒子的大小：变小的是content区域。

计算方式为content = width – border - padding

当设置box-sizing：content-box；

width=content；

5.渐变色：

。1.方向；。2至少有两个颜色；。3.一定的距离；

linear-gradient（to right，yellow，green）；

90deg是角度；

background：linear-gradient（

90deg，

yellow 25%，

green 25%，

green 50%，

pink 50%，

pink 75%，

blue 75%，

blue 100%）；

其中的百分比是分割距离；

没有距离无法过度；

将渐变当成图片来对待；

   设置背景图片大小:
当指定了背景图片尺寸时，百分比是相对于background-size；

　线性渐变

　　径向渐变

　　radial-gradient（120px at center center，yellow，green）；圆

　　radial-gradient（120px 80px at center center，yellow，green）；椭圆

　　center center可用百分比，数值显示；

清除塌陷：给父元素设置overflow:hidden或者设置边框；

::before     ::after

一个创建一个div 一个在前面和后面  这个前面和后面不是固定的  可以通过定位 随便定位置  。

过渡效果：transition：all 1s；

缩放：transform:scale(0.5)；

移动：transform：translate（100px，100px）；

旋转:transform:rotate(角度)；

倾斜：transform：skew（10deg垂直，10deg水平）；

动画：

animation：rotate 2s infinite linear；

1、必要元素：

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

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

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

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

2、关键属性

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

b、animation-duration动画持续时间

c、animation-delay动画延时时间

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

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

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

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

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

首先定义一个动画序列：

@keyframes  rotate{

        0%   {

transform：rotateZ（0deg）；

}

       100%{

 transform：rotateZ(360deg);

}

伸缩布局：

display：flex（伸缩布局）；

两端对齐：

justify-content（主轴方向对齐）：space-between；

利用了伸缩布局；

 

主轴：默认水平

侧轴：默认垂直

方向：主轴：从左到右；侧轴：从上到下；

 

  flex-direction：row（水平），column（垂直），row-reverse（水平翻转从右向左），column-reverse（垂直翻转从上到下）；

justify-content：flex-start：起点对齐

   flex-end：终点对齐；

   center：居中对齐

   stretch：拉伸对齐

   space-around：环绕对齐；

   space-between：两端对齐；

flex-wrap：nowrap/wrap控制是否换行；

align-content：堆栈排列；