CSS3的常用属性（二）

边框

边框圆角

border-radius： 100px 每个角可以设置两个值，x和y

补充： 可分别设置长，短半径，以“/”进行分隔，遵循顺时针的顺序，“/”之前为横轴半径，“/”之后为纵轴半径，如： border-radius： 10px 10px 10px 10px/ 20px 20px 20px 20px

边框阴影

box-shadow: 10px 5px 13px #fff

• 第一个值为水平偏移量，正值向右，负值向左
• 第二个值为垂直偏移量，正值向下，负值向上
• 第三个值为模糊度，不能为负值
• 第四个值为阴影颜色
  补充：可以设置多个边框阴影，inset可以设置内阴影 如：box-shadow： inset 5px 10px 20px #f52,inset 8px 15px 10px #fff

边框图片

border-image： url（“路径”） 20px 20px round  简写属性

border-image-source： url（“路径”）  设置边框图片的地址

border-image-slice： 20 20  图像边框的向内偏移

border-image-width： 20px  指定边框的宽度

border-image-repeat： repeat平铺 / round铺满 / stretch拉伸

补充： round会自动调整尺寸，完整显示边框图片，而repeat单纯平铺多余的部分，会被剪裁，不能完整显示

 

渐变

线性渐变

linear-gradient： 线性渐变指沿着直线朝一个方向产生渐变效果

background：linear-gradient（

to right，  表示方向（如left，right，top，bottom，也可以使用度数，如20deg）

#FFF，  渐变起始颜色

#aaa，  渐变终止颜色

）;

径向渐变

radial-gradient： 径向渐变指从一个中心点沿着四周渐变

background： radial-gradient（

100px at center，  表示围绕中心渐变。半径为100px，方向可以设置，如at left center，at 0px 0px

#aaa，  渐变起始颜色

#FFF，  渐变终止颜色

注意： 中心点的位置参照的是盒子的左上角，辐射范围可以不等，即可以是椭圆

）;

 

背景

background-size： width，height  设置图片的宽度和高度 如：background-size： 100% auto

补充： background-size： cover  自动调整缩放比例，保证图片始终填充满背景区域，如有溢出会被隐藏

　　　 background-size： contain  自动调整缩放比例，保证图片始终完整显示在背景区域

background-origin： 设置背景定位的起点，border-box以边框作为参考原点， padding-box以内边距作为参考原点，content-box以内容区作为参考原点

background-clip： 设置背景区域clip（裁切），border-box裁切边框以内作为背景区域，padding-box裁切内边距以内作为背景区域，content-box裁切内容区作为背景区域

 

过渡

transition： one，two  one为要过渡的属性，two为过渡的时间

transition-property： 设置过渡属性

transition-duration： 设置过渡时间

transition-timing-function： 设置控制速度linear（匀速），ease-in（加速）

transition-delay： 设置过渡延时

 

2D转换

转换可以实现元素的位移，旋转，变形，缩放等，在css3中通过transform（变形）来实现2d或3d转换

• scale（x，y）： 可以对元素进行水平和垂直方向的缩放，x和y取值可为小数，但不能为负数 如 选择器：hover{ transform： scale（10，10）；}
• translate（x，y）： 可以改变元素的位置 如 选择器：hover{ transform： translate（-10px，-20px）；}
• rotate（deg）： 对元素进行旋转，正值为顺时针，负值为逆时针 如 选择器：hover{ transform： rotate（-200deg）；}

注意补充： 属性的作用对各个浏览器不一定有效，所以使用私有化前缀

• -webkit-： 谷歌，苹果等
• -moz-： 火狐
• -ms-： IE
• -o-： 欧朋