打印

网页中制作出圆角边框

coffezi

注册会员

Rank: 2

帖子: 433
积分: 55
技术分: 1
在线时间: 11 小时
注册时间: 2005-2-8

1^# 大中小发表于 2006-11-13 11:31 只看该作者

网页中制作出圆角边框

以前我是在PS中处理图片导入在DW中，听说在DW中也能画出圆角的边框来，请问一下是什么方法？

TOP

黑色妖风

大鱼

版主

Rank: 7 Rank: 7 Rank: 7

帖子: 2216
积分: 346
技术分: 59
来自: 南京
在线时间: 238 小时
注册时间: 2001-11-25

2^# 大中小发表于 2006-11-20 16:51 只看该作者

用CSS~~N麻烦的~~~

这儿有个CSS圆角表格生成器,英文的，还不错，可以试用看看

CSS圆角表格生成器地址：http://www.neuroticweb.com/recursos/css-rounded-box/

代码:

<html>
<style type="text/CSS">
div#nifty{margin:0;background:#9BD1FA;font-size:12px;}
p {padding:0 5px;margin:0;}
div.rtop {display:block;background:#fff}
div.rtop div {display:block;height:1px;overflow:hidden;background:#9BD1FA}
div.r1{margin:0 3px}
div.r2{margin:0 2px}
div.r3{margin:0 1px}
div.rtop div.r4 {margin:0 1px;height:1px}
</style>
<div id="nifty">
<div class="rtop">
      <div class="r1"></div>
      <div class="r2"></div>
      <div class="r3"></div>
      <div class="r4"></div>
</div>
<p>div + CSS 圆角矩形--From <a href="http://www.achome.cn">www.achome.cn</a></p>
<div class="rtop">
      <div class="r4"></div>
      <div class="r3"></div>
      <div class="r2"></div>
      <div class="r1"></div>
</div>
</div>
</html>

Flash8.Net

开心的闪~~~~

TOP

黑色妖风

大鱼

版主

Rank: 7 Rank: 7 Rank: 7

帖子: 2216
积分: 346
技术分: 59
来自: 南京
在线时间: 238 小时
注册时间: 2001-11-25

3^# 大中小发表于 2006-11-20 16:52 只看该作者

无图片作的css圆角

<html>
  <head>
<style type="text/css">
u.corner u
{
      height: 1px;
      font-size:1px;
      display: block;
      overflow: hidden;
      /*author: meizz*/
      text-decoration: none;
      background-color: green;
}
u.corner u.h1{margin: 0 5px;}
u.corner u.h2{margin: 0 3px;}
u.corner u.h3{margin: 0 2px;}
u.corner u.h4{margin: 0 1px; height: 2px}
</style>
  <head>
  <body>
<div>
<u class="corner"><u class="h1"></u><u class="h2"></u><u class="h3"></u><u class="h4"></u></u>
   <div style="background-color: green; height: 200">content</div>
<u class="corner"><u class="h4"></u><u class="h3"></u><u class="h2"></u><u class="h1"></u></u>
</div>
  </body>
</html>

Flash8.Net

开心的闪~~~~

TOP

lovejenbb

游客

帖子: 1
积分: 0
技术分: 0
在线时间: 0 小时
注册时间: 2007-10-23

4^# 大中小发表于 2007-10-23 23:53 只看该作者

版主，非常感谢你提供的代码！

请问如果我想在同一个页面再添加一个不同颜色的圆角边框，我应该怎么修改这段代码？

无图片作的css圆角

<html>
  <head>
<style type="text/css">
u.corner u
{
      height: 1px;
      font-size:1px;
      display: block;
      overflow: hidden;
      /*author: meizz*/
      text-decoration: none;
      background-color: green;
}
u.corner u.h1{margin: 0 5px;}
u.corner u.h2{margin: 0 3px;}
u.corner u.h3{margin: 0 2px;}
u.corner u.h4{margin: 0 1px; height: 2px}
</style>
  <head>
  <body>
<div>
<u class="corner"><u class="h1"></u><u class="h2"></u><u class="h3"></u><u class="h4"></u></u>
   <div style="background-color: green; height: 200">content</div>
<u class="corner"><u class="h4"></u><u class="h3"></u><u class="h2"></u><u class="h1"></u></u>
</div>
  </body>
</html>

TOP