CSS3.0课堂讲义.docx

css3已完全向后兼容；浏览器将永远支持css2。css3的浏览器兼容性：ie6、7、8、9基本不兼容css3的效果，ie9少部分有效果，其他浏览器chrome、firefox、safari 、opera的高版本基本上兼容；只要有css3的属性，就必须加上浏览器的私有属性-webkit (chrome)-moz (firefox)-ms (ie)-o (opera) 前面三个必须写！！！border-radius---圆角边框(gte ie 9)属性值单位：px--%--em—rem四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角。两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角。一个值： 四个圆角值相同。border-radius: 100px/20px;之间加个斜杠，表示x轴的圆角半径为100px; y轴圆角半径为20px;box-shadow---阴影框(gte ie 9)属性值：offsetx offsety spread blur color [inset]x轴的偏移、y轴的偏移、阴影的大小、模糊度、颜色属性值可以跟多个，中间用逗号隔开；border-image: source slice width [outset] repeat;（ie不支持）border-image-source用于指定要用于绘制边框的图像的位置border-image-slice图像边界向内偏移border-image-width图像边界的宽度border-image-outset用于指定在边框外部绘制 border-image-area 的量border-image-repeat这个例子演示了如何创建一个border-image 属性的按钮。简写模式:Border-image:url(border.png) 27/27px round;background-size----背景图像的大小(gte ie 9)(里面的值需写两个)(*用%表示，若只写一个值，表示x轴，那么y轴会和x轴同比放大)(适当的变大变小可行，不可变大很多，因为是位图)单位：px---%---em---rembackground-size: cover(contain);a、cover---以铺满整个box为目标，等比放大（缩小）b、contain---等比放大（缩小），当某个边界碰到外面box就停止放大（缩小）5、background-origin属性---设置背景图片的起始位置(gte ie 9)notice: 如果背景图像background-attachment是固定，这个属性没有任何效果。padding-box背景图像填充框的相对位置(默认)border-box背景图像边界框的相对位置content-box背景图像的相对位置的内容框6、多个背景图像(gte ie 9)background:url(border.png), url(bt_blue.png);多个背景图片，中间用逗号隔开；先写的图片在最上层;7、线性渐变(gt ie 9)background: linear-gradient(direction, color-stop1, color-stop2, ...);渐变类的私有属性表述方法：background: -webkit-linear-gradient(10deg,red, blue, green);将私有属性-webkit-等写在属性的里面direction(方向)---to left/right/top/bottomdirection(方向)---to left top/left buttom……direction(方向)---30deg(自定义角度)使用透明度（transparency）---使用rgba()格式表述background: repeating-linear-gradient(direction, red, yellow 10%, green 20%);20%---表示色带占据整个box的比例；10%---表示yellow占据10%的位置，后面的以此类推；Notice：10%不可大于20%，若超过，则后面的不起作用；8、径向渐变（gt ie 9）background: radial-gradient(center, shape size, start-color, ..., last-color);center: 60px 55px表示x轴y轴的拉伸;shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。(若是