知识【html】 css.pptVIP

四角圆角半径相同 -moz-border-radius:1em; -webkit-border-radius:1em; border-radius:1em; 依次是右上角、右下角、左下角、左上角 特殊圆角半径的处理 border-top-left-radius:X半径 Y半径 border-top-left-radius:55pt 25pt; Chrome支持，Firefox 3.6不支持，据说Opera和KHTML核心浏览器也有针对CSS3的圆角效果的支持，比如 -opera-border-radius 和 -khtml-border-radius， * 边框-图片border-image 允许在元素的边框上设定图片， 用图片制作方块元素的边框是CSS3的新特性之一， 可用图片作为一个盒状模型的边框，比原来的线条边框更加美观，运用更灵活。 浏览器支持 最新的Opera 10.54，chrome，safari都支持 * 常用范例 img {?? ??? border: 6px solid #f2e6d1;?? ??? -webkit-border-image: url(main-border.png) 6 repeat;?? ??? -moz-border-image: url(main-border.png) 6 repeat;?? ??? border-image: url(main-border.png) 6 repeat;?? ??? } 首先定义了边框宽度为5像素，然后告诉支持CSS3的Webkit浏览器和Mozilla浏览器边框图片的地址和图片取值大小，以及重复规则， 这里表示的是使用了一张名为border-image.png的图片，利用图片5像素以内的区域重复平铺作为边框图片。 如果要使用图片的某部分作为边框图片，可以修改图片后的数值来定义对图片的取舍区域， 图2范例 border: 25px solid #cccccc; border-image: url(border.png) 27 27 27 27 round round; -webkit-border-image: url(border.png) 27 27 27 27 round round; -moz-border-image: url(border.png) 27 27 27 27 round round; 将中间的黄色菱形进行了拉伸定义： 图3范例 border-width: 18px 25px 25px 18px; border-image: url(border.png) 18 25 25 18 stretch stretch; -webkit-border-image: url(border.png) 18 25 25 18 stretch stretch; -moz-border-image: url(border.png) 18 25 25 18 stretch stretch; * 和原来CSS2中的边框属性一样，图片边框每个边也可以单独设置： border-image: 图片边框 border-top-image border-right-image border-bottom-image border-left-image border-corner-image: 图片圆角边框 border-top-left-image border-top-right-image border-bottom-left-image border-bottom-right-image * 边框-阴影box-shadow 阴影背景 在CSS2时代，只能使用背景图实现，唯一能够由CSS显示出阴影效果的只有Safari浏览器， CSS3块阴影属性在很大程度上减少了渲染网页效果的麻烦。 浏览器支持情况 之前，只有Webkit浏览器支持，尤其是Safari和Chrome，只需写带-webkit前缀就可以 目前，Opera 10.54 也已经支持box-shadow属性。 box-shadow有六个可设值： img{ box-shadow：阴影类型 X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色 } 当不设阴影类型时，默认为投影效果。当设为inset时，为内阴影效果。 X轴和Y轴位移不等同但类似于photoshop里面的”角度”和”位置。 阴影大小、扩展、颜色和Photoshop里面的都同理。 CSS3块阴影效果代码如下： .box1 { width:300px; background:#eeeeee; color:#444; border:1px solid #