可自由扩展的圆角矩形制作方法
轉自：http://golen.blog.sohu.com/96114249.html
制作一個好的web標準站點,擴展性要多考慮,擴展性做的好的網站,會給后期的維護和升級會帶來很大的方便.
現在總結一下我做web以來,可擴展的圓角矩形的制作方法:
方法一:
命名:round.gif:
代碼如下:
<!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>
* { font-size:12px}
.roundbox{
position:relative;
border:1px solid #6d298e;
width:400px; /* 根據需要可改變不同的寬度 */
padding:8px;
line-height:22px
}
.roundbox span{
display:block;
position:absolute;
width:5px;
height:5px;
font-size:0
}
.top_left{
left:-1px;
top:-1px;
background:url(round.gif) top left
}
.top_right{
right:-1px;
top:-1px;
background:url(round.gif) top right;
}
.bottom_left {
left:-1px;
bottom:-1px;
background:url(round.gif) bottom left;
}
.bottom_right {
right:-1px;
bottom:-1px;
background:url(round.gif) bottom right;
}
</style>
</head>
<body>
<div class="roundbox">
?
<span class="top_left"></span>
<span class="top_right"></span>
<span class="bottom_left"></span>
<span class="bottom_right"></span>
這里是一個寬416px的圓角矩形，這里是一個寬416px的圓角矩形，這里是一個寬416px的圓角矩形，這里是一個寬416px的圓角矩形，這里是一個寬416px的圓角矩形
</div>
</body>
</html>
ps:1.css中font-size:0主要是解決IE6.0下的一個bug;
?? 2.我個人比較贊同這種做法.方法一的擴展性做的很好,代碼也簡潔明了.
方法二:
1.在PS中畫一個足夠大的圓角矩形(我這里畫的是660*339相素,其實還是小了點)
命名:bground.gif
代碼如下:
<!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>
* { font-size:12px}
.c,.c i,.c i i,.c b,.c b b,.c p{ background:url(bground.gif) no-repeat
}
.c{
width:200px;/* 根據需要可改變不同的寬度 */
background-position:0 -4px;
}
.c i{
display:block;
height:4px;
font-size:0
}
.c i i{
margin:0 0 0 4px;
background-position:right 0;
}
.c b{
display:block;
height:4px;
background-position:0 bottom;
font-size:0
}
.c b b{
margin:0 0 0 4px;
background-position:right bottom;
}
.c p{
margin:0 0 0 4px;
padding:8px;
background-position:right -4px;
line-height:22px
}
</style>
</head>
<body>
<div class="c">
<i><i></i></i>
<p>
這里是一個寬216px的圓角矩形，這里是一個寬216px的圓角矩形，這里是一個寬216px的圓角矩形，這里是一個寬216px的圓角矩形，
</p>
<b><b></b></b>
</div>
</body>
</html>
ps:這種方法缺點是多了一些無意義的標簽,好象在web標準中也不大贊同用<i>這樣的標簽.
分別預覽:
方法三:
純粹用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>
* { font-size:12px}
.roundbox { width:400px /* 根據需要可改變不同的寬度 */}
.roundbox div { padding:8px; border-left:1px solid #6d298e; border-right:1px solid #6d298e}
.r {border-right:1px solid #6d298e;border-left:1px solid #6d298e;height:1px;font-size:1px;overflow:hidden;display:block;}
.a1 {margin:0 5px; background:#6d298e;}
.a2 {margin:0 3px; border-right-width:2px; border-left-width:2px;}
.a3 {margin:0 2px;}
.a4 {margin:0 1px; height:2px;}
.a5 {height:auto;font-size:medium;}
</style>
</head>
<body>
<div class="roundbox">
?? <b class="r a1"></b><b class="r a2"></b><b class="r a3"></b><b class="r a4"></b>
?? <div>這里是一個寬400px的圓角矩形,這里是一個寬400px的圓角矩形,這里是一個寬400px的圓角矩形,這里是一個寬400px的圓角矩形,這里是一個寬400px的圓角矩形,這里是一個寬400px的圓角矩形,這里是一個寬400px的圓角矩形,這里是一個寬400px的圓角矩形,這里是一個寬400px的圓角矩形,</div>
?? <b class="r a4"></b><b class="r a3"></b><b class="r a2"></b><b class="r a1"></b>
</div>
</body>
</html>
預覽:
PS:圓角的地方似乎并不圓滑,而且拐角的弧度也不好控制,感覺這種方法沒前兩種方法好.
轉載于:https://www.cnblogs.com/luoyanli/archive/2013/06/06/3121228.html
總結
以上是生活随笔為你收集整理的可自由扩展的圆角矩形制作方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用Keil-MDK开发TQ2440裸机程
- 下一篇： 阅读作业2王冬篇