最新版本的层叠样式表——CSS3.ppt

【例4-24】 html head style type=text/css section{ padding:20px; border:3px solid #000; } #border-top-left-radius{ border-top-left-radius:10px; } #border-top-right-radius{ border-top-right-radius:10px; } #border-bottom-right-radius{ border-bottom-right-radius:10px; } #border-bottom-left-radius{ border-bottom-left-radius:10px; } #border-irregular-radius{ border-top-left-radius:20px 50px; } 接上 /style /head body h1左上圆角：/h1 section id=border-top-left-radius precode#border-top-left-radius{ border-top-left-radius:10px; }/code/pre /section h1右上圆角：/h1 section id=border-top-right-radius precode#border-top-right-radius{ border-top-right-radius:10px; }/code/pre /section h1右下圆角：/h1 section id=border-bottom-right-radius precode#border-bottom-right-radius{ border-bottom-right-radius:10px; }/code/pre /section h1左下圆角：/h1 section id=border-bottom-left-radius precode#border-bottom-left-radius{ border-bottom-left-radius:10px; }/code/pre /section /body /html 浏览【例4-24】的结果 【例4-25】 html head style type=text/css section{ padding:20px; border:3px solid #000; } #border-irregular-radius{ border-radius: 20px 50px; } /style /head body h1不规则圆角：/h1 section id=border-irregular-radius precode#border-irregular-radius{ border-radius:20px 50px; }/code/pre /section /body /html 浏览【例4-25】的结果 【例4-26】 html head style type=text/css section{ padding:20px; border:3px solid #000; } #border-circle-radius{ text-align: center; font:normal 40px/100% Arial; text-shadow:1px 1px 1px #000; color:#fff; background-color:yellow; width:400px; height:400px; padding:0; border-radius:200px; } /style /head body h1圆形：/h1 section id=border-circle-radius pHello,CSS3!brHello,HTML5! /p /section /body /html 浏览【例4-26】的结果 4.2.2 多彩的边框颜色 在CSS3中，设置边框颜色的属性如下： ? border-bottom-colors，定义底边框的颜色； ? border-top-colors:，定义顶边框的颜色； ? border-left-colors:，定义左边框的颜色； ? border-right-colors:，定义右边框的颜色。 使用这些属性的语法 border-bottom-colors: 颜色值1 颜色值2 … 颜色值n border-top-colors: 颜色值1 颜色值2 … 颜色值n border-le