首页 > 代码库 > 关于css3

关于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、关键属性

 

aanimation-name设置动画序列名称

 

banimation-duration动画持续时间

 

canimation-delay动画延时时间

 

danimation-timing-function动画执行速度,linearease

 

eanimation-play-state动画播放状态,playpaused

 

fanimation-direction动画逆播,alternate

 

ganimation-fill-mode动画执行完毕后状态,forwardsbackwards

 

hanimation-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:堆栈排列;    

 

关于css3