圆角边框制作及其应用示例

　　本节将重点研讨利用 CSS 包含选择符定义 CSS 定义背景图片的功能，在通用圆角定义的基础上进行圆角各种应用，以实现多种圆角边框效果。先看下面的实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>利用含选择符实现多样式圆角边框应用示例</title> <style> body, div, dl, dt, dd{ margin: 0px; padding: 0px; } body { text-align: center; font: normal normal normal 12px/150% Arial, "宋体", Helvetica, sans-serif; } div { margin: 0px auto; width: 500px; } /* ==圆角定义开始== */ /* --3px圆角通用定义-- */ .line_t, .line_b, .line_t span, .line_b span { height: 3px; font-size:0px; overflow: hidden; } .line_t span, .line_b span { width: 3px; float: left; background: url(/skin/yahu/images/line_tb_l.gif) no-repeat left top; } .line_t, .line_b { background: url(/skin/yahu/images/line_tb_r.gif) no-repeat right top; } .line_b, .line_b span { background-position: right -3px; } .line_c { border-left: 1px solid #d3d3d3; border-right: 1px solid #d3d3d3; overflow: hidden; height: 100%; } /* --3px黑圆角定义-- */ .line_black { background: url(/skin/yahu/images/bg_black.gif) #838282 repeat-x center 3px; } .line_black .line_t span, .line_black .line_b span { background-position: left -10px; } .line_black .line_t, .line_black .line_b { background-position: right -10px; } .line_black .line_b, .line_black .line_b span { background-position: right -13px; } .line_black .line_c { background: url(/skin/yahu/images/border_r_black.gif) repeat-y right top; border: none; } .line_black .line_c span { background: url(/skin/yahu/images/border_l_black.gif) repeat-y left top; } /* --3px红圆角定义-- */ .line_red { background: url(/skin/yahu/images/bg_red.gif) #9d0000 repeat-x center 3px; } .line_red .line_t span, .line_red .line_b span { background-position: left -20px; } .line_red .line_t, .line_red .line_b { background-position: right -20px; } .line_red .line_b, .line_red .line_b span { background-position: right -23px; } .line_red .line_c { background: url(/skin/yahu/images/border_r_red.gif) repeat-y right top; border: none; } .line_red .line_c span { background: url(/skin/yahu/images/border_l_red.gif) repeat-y left top; } /* --3px蓝色圆角定义-- */ .line_blue { background: url(/skin/yahu/images/bg_blue.gif) #008d9d repeat-x center 3px; } .line_blue .line_t span, .line_blue .line_b span { background-position: left -30px; } .line_blue .line_t, .line_blue .line_b { background-position: right -30px; } .line_blue .line_b, .line_blue .line_b span { background-position: right -33px; } .line_blue .line_c { background: url(/skin/yahu/images/border_r_blue.gif) repeat-y right top; border: none; } .line_blue .line_c span { background: url(/skin/yahu/images/border_l_blue.gif) repeat-y left top; } /* --左背景span定义-- */ .line_black .line_c span, .line_red .line_c span, .line_blue .line_c span { padding: 0px 10px; display: block; height: 28px; line-height: 28px; } .line_black, .line_black a, .line_red, .line_red a, .line_blue, .line_blue a { color: #fff; } /* --5px渐变圆角定义-- */ .line_nav { margin: 8px auto; background: url(/skin/yahu/images/bg_nav.gif) #fff repeat-x left bottom; } .line_nav .line_t, .line_nav .line_b, .line_nav .line_t span, .line_nav .line_b span { height: 5px; } .line_nav .line_t span, .line_nav .line_b span { width: 5px; background-position: left -40px; } .line_nav .line_t, .line_nav .line_b { background-position: right -40px; } .line_nav .line_b, .line_nav .line_b span { background-position: right -45px; height: 10px; } .line_nav .line_c { padding: 0px 5px 0px 20px; line-height: 24px; } /* --5px灰底灰色圆角定义-- */ .line_gray .line_t, .line_gray .line_b, .line_gray .line_t span, .line_gray .line_b span { height: 5px; background: url(/skin/yahu/images/line_tb_l.gif) #eee no-repeat; } .line_gray .line_t span, .line_gray .line_b span { width: 5px; } .line_gray .line_t span { background-position: left -60px; } .line_gray .line_t { background-position: right -70px; } .line_gray .line_b span { background-position: left -65px; } .line_gray .line_b { background-position: right -75px; } .line_gray .line_c { border: none; padding: 2px 10px; background: #eee; } /* ==圆角定义结束== */ </style> </head> <body> <br /> <br /> <br /> <div> <dl class="line_t"><span></span></dl> <dl class="line_c"> <span> 3px灰色圆角样式 </span> </dl> <dl class="line_b"><span></span></dl> </div> <br /> <br /> <div class="line_black"> <dl class="line_t"><span></span></dl> <dl class="line_c"> <span> 3px黑色圆角样式 </span> </dl> <dl class="line_b"><span></span></dl> </div> <br /> <br /> <div class="line_red"> <dl class="line_t"><span></span></dl> <dl class="line_c"> <span> 3px红色圆角样式 </span> </dl> <dl class="line_b"><span></span></dl> </div> <br /> <br /> <div class="line_blue"> <dl class="line_t"><span></span></dl> <dl class="line_c"> <span> 3px蓝色圆角样式 </span> </dl> <dl class="line_b"><span></span></dl> </div> <br /> <br /> <div class="line_nav"> <dl class="line_t"><span></span></dl> <dl class="line_c"> <span> 5p渐变圆角样式</span> </dl> <dl class="line_b"><span></span></dl> </div> <br /> <br /> <div class="line_gray"> <dl class="line_t"><span></span></dl> <dl class="line_c"> <span> 5p全灰色圆角样式</span> </dl> <dl class="line_b"><span></span></dl> </div> </body> </html>
提示：您可以先修改部分代码再运行

　　第一张图片用于圆角边框的左侧顶部和左侧底部，将左侧所需的上下二个圆角都放在一张图片中，将多个样式的图片制作在一个图片中，后面可以利用 CSS 对背景图片的定位（background-position）来显现不同圆角图片。

　　同样原理，第二张图片用于圆角边框的右侧顶部和右侧底部，将右侧所需的上下二个圆角都放在一张图片中，将多个样式的图片制作在一个图片中，后面可以利用 CSS 对背景图片的定位（background-position）来显现不同圆角图片。为考虑今后不同宽度的圆角边框应用，建议将宽度尽可能做宽些（如宽 1000px 等）。

　　学会利用利用 CSS 对背景图片的定位（background-position）来显现同一张图片中不同位置的图片显示是一个重点知识：当 position 为正值时图片将按正常位置进行正向偏离；当 position 为负值时图片将按正常位置进行负向偏离。

Home << 1 2 3 4 >> End

作者：yahu 发布时间：2008年09月24日点击数：【收藏】【打印文章】

上一篇：HTML颜色表　　下一篇：利用正则表达式批量替换代码

动易雅虎

推荐阅读

圆角边框制作及其应用示例

作者：yahu 发布时间：2008年09月24日点击数：【收藏】【打印文章】

查看本文的所有评论 >>网友评论