可自由扩展的圆角矩形制作方法

2024-05-25 00:34:49

转自：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

可自由扩展的圆角矩形制作方法相关推荐

html圆角边框只有左边,border-radius以外的CSS圆角边框制作方法
CSS3的border-radius利用DIV+CSS生成圆角边框,在很多情况下都会用到,目前DIV+CSS的圆角边框,一种是利用CSS3,一种是利用布局模拟出圆角. 先说第一种,利用CSS3,前提是 ...
android paint 圆角绘制_[BOT] 一种android中实现“圆角矩形”的方法
内容简介文章介绍ImageView(方法也可以应用到其它View)圆角矩形(包括圆形)的一种实现方式,四个角可以分别指定为圆角.思路是利用"Xfermode + Path"来进行 ...
绘制圆角矩形（方法）
/* sharecodes.org 友情提醒:尊重知识,转载请注明原创作者.出处! */ /// <summary> /// C# GDI+ 绘制圆角矩形 /// </summary ...
php 绘制圆角矩形,快速绘制圆角矩形的三种方法 - 行业动态 - 济南新视觉实训基地-平面UI设计PS培训，室内设计，web前端，影视3D动画后期制作培训...
圆角矩形可谓是UI设计中,我们最常见到的元素之一了,通过圆角矩形工具去绘制的圆角过于普通,且略显呆板,缺少吸引力.今天新视觉实训就给大家分享三种绘制圆角矩形的方法,让我们在千篇一律的圆角矩形中找寻一些 ...
HTML设置单边圆角,如何在html中做圆角矩形和只有右边的分隔线
其实是对(理论上是对所有的)html元素: 而实际常用的是 div块, 链接a 等运用圆角矩形的样式这个圆角是通过元素: div, a的 css 样式来实现的: 样式: border-radius ...
html中正方形圆角框,CSS高级技巧:圆角矩形
所谓的CSS高级技巧...其实是一些对基本技巧的创意组合, 任何手段和技巧都是解决问题的方法. 只要学会这种思考问题的方法, 你也能拥有属于自己的CSS秘籍. CSS2 还没有办法创造出曲线边框, 明 ...
提升 PPT 逼格的秘诀：善用圆角矩形
其实想要做出"别人的 PPT"并没有那么困难,只要你能利用好现有的一切,就算是最基础的几何图形,也能带来巨大的改变. 你所需要做的,就是花10分钟读完这篇文章. 本场 Chat 中 ...
玩转canvas之实现一个圆角矩形
使用canvas封装一个绘制圆角矩形的方法代码原理思路分析讲解缺陷改进改进圆角非正规圆角的问题改进后的代码实现的圆角改进圆角过大的问题总结完整代码在canvas中绘制一个矩形 ...
Android开发之自定义圆角矩形图片ImageView
android中的ImageView只能显示矩形的图片,这样一来不能满足我们其他的需求,比如要显示圆角矩形的图片,这个时候,我们就需要自定义ImageView了,其原理就是首先获取到图片的Bitmap ...

最新文章

热门文章