6.30学习笔记

border-radius属性
在css3中可以使用border-radius进行圆角边框的绘制，在网页中呢，我们经常使用圆角边框来美化我们
的页面，在css3出现之前呢:我们如果要在网页上展示一个圆角边框的一-个效果,那么我们需要绘制图形
在css3出现之后呢我们就只需要-段简单的代码就可以实现圆角边框的效果。
使用方法:
border- radius:半径
border-radius属性使用的时候，我们只需要定义好圆角的半径就可以绘制圆角边框了。
兼容性:
Firefox Chrome Safari Opera
IE9+、Firefox 4+、Chrome. Safari 5+以及Opera支持border-radius 属性.
border-radius属性中指定两个半径
在border-radius属性中，可以指定两个半径，制定方法如下:
border-radus:40px 20px;
第一个半径作为边雄左上角与边想右下角的圆半径来绘制。
第二个半径作为边框右上角与边程左下角的圆手径来编制。

不显示边框时
在CSS3中，如果使用了border-radius属性但是把边框设置为不显示时，浏览器会把背景的四个角绘制成
圆角。

修改边框种类时
使用了border-radius属性后，不管边看是什么种类，都会将边框沿着园角曲线进行给制。

绘制4个不同半径的圆角边框
border- top-left-radius:左上角半径
border- bottom-left-radius:左下角半径
border- top- right-radus:右上角半径
border- bottom- right-radius:右下角半径

使用图像边框
在css3中增加了一个border-image属性，可以让元素的长度或宽度处于随时变化时，变化状态的边框统
使用一个图像文件来进行绘制.

1. border image属性最简单的使用方法:
   -webkit- border-image: ur(“边框图像的路径”)上边距右边距下边距左边距;
   出
   -moz-border- image: ur(”边框图像的路径")上边距右边距下边距左边距;
   -0-border-image: ur(“边框图像的路径")上边距右边距下边距左边距;
   border- image: ur(边框图像的路径")上边距右边距下边距左边距;

上面的参数中，图像的路径。上边距、右边距、下边距、左边距必须进行指定，但是如果上边距、右边距
，下边距、左边距得值完全一样，那么就可以缩写为一个。
写法如下:
border- image: url(“边框图像的路径”)边距；
当我们指定了上边距右边距下边距左边距之后呢!浏览器就会对我们的这个背景图像进行切割，那么他是
怎样去对我们的这个图像进行切割的呢?

在浏览器中显示的时候，border- top-left- image、border- top-right- image.
border-bottom- right- image、border- bottom-left-image不会进行任何的拉伸。
而border- top-image、border-right- image、border-bottom image、border-left- image会分别作
为，上边在。右边框、下边框、左边在的这个背景图像来进行显示:必要的时候呢，还可以将这四个图像
进行这个平铺或者伸缩。

弓外border的宽度也可以对四条边进行分别设置
设置的方法:
ad
border- image: ur("边框图像的路径)上边距右边距下边距左边距/border上宽度border右宽店
order下宽度border左宽度;
3、指定四条边的背景的显示方法
0
CSS3中可以在border- image属性中指定元素四条边中的图像，是以拉伸的方式显示，还是平铺方式
进行显示。
旨定方法如下:
order-image: ur(“边框图像的路径”)上边距右边距下边距左边距/border宽官topbottom
eftright;
opbottom表示元素的上下两条边中圈像的显示方法，leftright表示元素的左右两条边中的显示方式，在
显示方法中可以指定的值有repeat. stretch和round。

CSS3中国变形功能
1、如何使用transform功能
在css3中通过transform属性，来实现transform功能。
transform:功能;
-ms- transform:功能; /* IE 9 /
-moz- transform:功能; 1”Firefox /
-webkit- transform:功能; / Safari和Chrome "/
-0- transform:功能; /* Opera */
2. rotate旋转，在参数中规定角度
使用方法:
-ms- transform:rotate(角度); / IE 9 /
-moz- transformrotate(角度); / Firefox /
-webkit- transform:rotate(角度); / Safari 和Chrome /
-0- transform:rotate(角度); / Opera */
rotate表示顺时针旋转，deg表示CSS3中的角度单位；

3、scale缩放转换
出
使用方法:
transform:scale(值)，他的值是指定的缩放倍窜，比如0.5就是缩放到50%，1就是100%，1.5 就是
大点150%。
可能的值:
1)、scale(xy)使元索X轴和Y轴同时缩放
2)、scalex(x)元素仅x轴缩放
3)、scaleY(y)元素仅Y铀缩放
4、倾斜skew
使用方法: transform:skew(值)，他的值是角度。
可能的值:
1)、skew(x,yV)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形）只有
一个参 数时，只在水平方向上倾斜.
2)、skewX[x)仅使元素在水甲方向扭曲变形(X轴扭曲变形)
出
3)、skewY(y)仅使元素在垂直方向扭曲要影(Y轴扭曲变彤)
也
5、移动translate
使用方法: transform: translate(值);他的值是指定移动的距离。
可能的值:
1)、translate(x.y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)只有一个参数时，只在
水平方向上移动:
2)、translateX(x)仅水平方向移动(X轴移动》
3)、translateY(Y)仅直方向移动(Y轴移动)

6、对一个元素使用多种变形的方法:
使用方法: transform:方法1方法2方法3方法41
7、改变元素基点transform-origin
可能的值
top left top right top
left center right
bottom left bottom bottom right

CSS3动画功能
css3中transition允许css的属性值在一定的时间区间内平滑地过渡。 这种效果可以在鼠标单击。获得焦
点、被点击或对元素任伺改变中触发，并圆滑地以幼画效果改变CSS的属性值
transition属性的使用方法:
transition:语法;
-moz- transition: 语法; /" Firefox4 /
-webkit- transition:语法; 1 Safari 和Chrome /
-0- transition:语法; / Opera*/
语法: .
transition: property duration timing- function delay;
transition主要包含四个属性值:
1)、执行变换的属性: transition- property,属性规定应用过渡效果的Css属性的名称。(
当指定的css属性改变时。过渡效果将开始)
值有三个类型:
A、none没有属性会获得过渡效果出
日. all所有属性都将获得过渡效果。
C. property定义应用过濃效果的Css属性名称列表，列表以逗号分隔。
2)。变换延续的时间: transition- duration;
规定完成过渡效果需要花费的时间(以秒或毫秒计)，默认值0没有效果
3)。在延续时间段。变换的重率变化transition- timing- function管
值:
A、ease: (逐新变慢) 默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
B. linear: (匀速) ，linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)。
C. ease-in: (加速)，ease-in函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
D. ease-out: (减速)，ease- out函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
E、ease-in-out:《加速然后减速)，ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
F、cubic-bezier(n,n,n,n)在cubic-bezier负数中定义自己的值。可能的值是0至1之间的数值。
4)、变换延迟时间transition-delayi
transition- delay是用来指定-个动国开始执行的时间，也就是说当改变元素属性值后多长时间开始执行
transition效果，其取值: 为数值，单位为s (秒)或者ms(毫秒)

Animations
1.使用transition和Animations的区别:
transition和Animations的区别在于，transition只能通 过指定属性的开始值与结束值，然后通过两属
性值之间进行平滑过意的方式来实现动画效果，所以transition不能实现复杂的动画效果，而
Animatiods功能是是通过关键帖以及每个关过帧中的属性值来实现更为复杂的动画效果。

2. Animations的使用方法:
   @- webkit-keyframes关键帧合集名称{创建关键帧的代码}
   0%~100%(
   本关键帧中的样式
   }
   关键帧创建好了之后。还要在元素的样式中使用该关键帧。
   方法如下:
   元素{
   -webkit- animation- name:mycolor;
   -webkit- animation- duration:5s;
   -webkit- animation- timing- function:linear;
   -webkit- animation- iteration- count:infinite;
   }
   webkit- animation-name指定合集名称，
   -webkit- animation-duration整个动画执行完威所系
   要的时间-webkit-animation- timing- function实现动画的方法
   ,webkit- animation-iteration- count属性的属性值设定为某个整数值，那么这个动画婚放的次数就等
   于这个整数值( infinite是无限循环播放)。

3.实现动画的方法:
A、linearl从开始到结束都是以同样的速度进行.
日。ease-in:开始速度很慢，然后沿着曲线进行加快。
C. ease-out:开始速度很快，然后沿着曲线进行减速。
D. ease:开始时速度很快，然后沿着曲线进行减速，然后再沿着曲线加速。
E、ease-in-out:开始时速度很慢，然后沿着曲线进行加速，然后再沿着曲线成速。