CSS3 样式2,以及动画属性

border-radius，边框半径

border-radius：20px 20px; 左上角右下角，右上角左下角；border-radius：10px 20px 30px; 左上角，右上角左下角，右下角；border-radius:10px 20px 30px 40px; 上右下左；border-bottom-right-radius:10px;border-bottom-right-radius:10px 20px; 当设定了两个值的时候，边框表现为椭圆；border-radius:30px 30px 30px 30px/40px 40px 40px 40px; 分别代表了x轴和y轴，一般很少用这种方式；

border-image，边框背景

border-image-source:url("border.png");border-image-slice:27 27 27 27;(其值不带单位)border-image-repeat:stretch; 拉伸； repeat; 直接平铺； round; 缩放平铺；（推荐使用） tips：source表示边框背景的路径； slice表示边框背景如何切，27代表了位置； repeat表示背景的平铺方式；优点：可以代替以前只能给边框设置颜色、大小、点画线的局限性；缺点：切割图片需要一定的调试，且依赖于所使用图片；

background,背景

背景尺寸

background-size:500px 500px; 500px auto; 100% auto; cover; (铺满，自动调整) contain; (完全显示图片，自动调整) tips:当html，body内有一元素宽高都为100%的盒子，为了撑开盒子的宽高，html，body都应该设置一个宽高100%；

线性渐变

background-image:linear-gradient(to right,#000 25%,#fff 50%); tips:25%和50%都分别指渐变的起点，可以写px值； 在实际中，渐变一般会用图片直接做，用一个宽度为2px的长条，进行repeat平铺；

圆形渐变

background-image:radial-gradient(20px at center,red,yellow);background-image:radial-gradient(40px 20px at center,red,yellow);tips：有两个px参数时，该渐变是一个椭圆；

背景的定位原点、裁切原点

background-origin:padding-box; border-box; content-box;background-clip:padding-box; （很少用） border-box; content-box;

背景定位

background-postion：left top;

多重背景

background-position:left bottom, right top, right bottom;background-image:url("images1.jpg"), url("images2.jpg"), url("images3.jpg");二者还可以连写：background:url("images/bg1.png") top left no-repeat, url("images/bg2.png") top right no-repeat, url("images/bg3.png") bottom right no-repeat;

transition，过渡

常用

transiton:all 0.5s; 所有变化在0.5s中进行；

四个属性

transition-property:width; 代表了需要改变的属性；transition-duration:0.3s; 改变所需要的时间；transition-delay:2s; 延时；transition-timing-function:ease; 改变的轨迹函数； linear; ease-in; ease-in-out; tips:过渡最好加在原始状态；在调试器的elements中，右键可以查看在:hover等事件下的属性；在open-cubic-bezier-editor中，可以查看其轨迹统计（transition样式的紫色图标）；

连写形式

transition:height 0.3s 1s ease-in; 改变的属性，变化时间，延时，轨迹函数；