表格边框 弧度怎么做?

star2up 2007-08-22 03:01:19
如题:类似于按钮的边框的样子。
...全文
590 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
star2up 2007-11-01
  • 打赏
  • 举报
回复
谢谢 yiran5467 给分结帖
ssfwhxy 2007-08-30
  • 打赏
  • 举报
回复
与其用那么多代码来实现不如直接用图片来的好,通俗易懂
ljf9201314 2007-08-30
  • 打赏
  • 举报
回复
Ajax的浪潮正在逐步改变着Web开发的方式。谈到Ajax,Web开发人员似乎更注重于XMLHttpRequest和JavaScript,而淡忘了Ajax另外一个重要的组成部分—— CSS。事实上,CSS和DOM、XHTML以及粘合它们的JavaScript密不可分,相辅相成,而且CSS能帮助Web开发人员重新审视自己的作品,让结构和细节更适合于网页的展现形式。

宝剑锋从磨砺出,继Ajax三剑客后,博文视点CSS三剑客之实战之剑、务实之剑、技巧之剑将依次铸炼成功,献于Web2.0技术浪潮中的各位侠客。


《CSS实战手册》——实战之剑,2007年9月“剑露锋芒”,主要介绍了CSS这种强大的设计语言的方方面面,从入门到精通,循序渐进,内容丰富全面、通俗易懂,实战性强,意在使读者能更快速且更专业地从事网站设计和开发工作。因为它的“实战性”,在SDWest大会上,获得了Jolt生产效率奖。

这本书得到了Jolt的技术类书籍的大奖,据我所知,这是Web标准方面(HTML、CSS、JavaScript、Ajax、etc)的技术书籍中第一本获得Jolt大奖的。由于Jolt大奖的信誉,足以让我们对这本书高度关注。------------李锟(Ajax中国站长)

《CSS Cookbook中文版》——务实之剑。2007年9月出版。《CSS Cookbook中文版》有很多精辟的建议,传授了大量设计技巧,同时列举了上百个详细的例子,并且每一例都穿插了可以随时取用的代码。为了方便读者参考和展开讨论,该书以一种易于快速查找的方式安排各章节,每一节都附有一段总结性的讨论说明。正所谓重剑无锋,大巧不工,务实是《CSS Cookbook中文版》成书特点。在学习CSS过程中,您可能会遇到各种各样稀奇古怪问题,正所谓“惑”无巨细,它将给您娓娓道来,这对Web开发者节约时间少走弯路大有裨益。
“《CSS Cookbook中文版(第2版)》全书都是针对CSS设计中常常碰到的疑难杂症提出各种实用性解决方案。在CSS的学习过程中结合领会这些精妙的方法,对于节约时间少走弯路大有裨益。”---------- Dave Shea(世界著名网站设计师,《CSS禅意花园》作者之一)


《CSS实战精萃》——技巧之剑。2007年10月出版。《道德经》载曰:道生一,一生二,二生三,三生万物。CSS这门“大道”在《CSS实战精萃》中被作者分解成大量而不失严谨的知识点和技术点,变化无穷。每个章节内容翔实,每个技术点后就有好几个一线的案例研究,三位Web设计师丰富的经验也常常跃然于纸上。该书旨在Web开发四个方面帮助读者:可维护性,兼容性,可重用性和实用性。该书适用于那些对(X)HTML和CSS有基本理解并希望能更上一层楼的人群。因为您绝对不会满足于“只是会写几行CSS代码”。

任何人想要从一些顶尖的Web设计师那里学习技术,进一步丰富自己的CSS知识和经验, 这就是本非常棒的书,一本必须购买的书。----- Frank Stepanski(亚马逊)

当“Table禁止用于布局”逐步写进各大公司的网页制作规范的时候,当CSS + Div模式已经成为行业标准的时候,当开发的产品要适应不同浏览器的时候,我们逐步发现,行业技术在不断地细化,网页的设计与制作之间的关系,不仅超越了技术本身,而且还逐步引入感官体验、易用性,甚至交互设计等元素。由此可见这种直接给予用户第一感受的载体——网页,是多么的重要。博文视点CSS三剑客正是迎着新一轮互联网的大潮,为广大Web开发者提供的一个“兵器谱”:实战之剑,从入门到精通循序渐进;务实之剑,囊括了上百个精巧的案例;技巧之剑,包含丰富的CSS使用技巧和作者经验,想要成为CSS顶尖专家,“一本都不能少”。
yiran5467 2007-08-22
  • 打赏
  • 举报
回复
立体的:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
#krazy_container {display:block; margin-right:25px; position:relative; background:#bcb; padding:50px 0; font-size:12px; font-family:Arial,sans-serif;}
#krazy_container h2 {margin-bottom:1em;}
#krazy_container h3 {clear:both; margin-top:4em;}

/* Inset 3D Raised */
.raised {background: transparent; width:40%; margin:0 auto;}
.raised h1, .raised p {margin:0 10px;}
.raised h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.raised p {padding-bottom:0.5em;}

.raised .top, .raised .bottom {display:block; background:transparent; font-size:1px;}
.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden;}
.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}
.raised .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}
.raised .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}
.raised .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;}
.raised .b4b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #999;}
.raised .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #999;}
.raised .b2b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #999;}


.raised .b1 {margin:0 5px; background:#fff;}
.raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}
.raised .b3, .raised .b3b {margin:0 2px;}
.raised .b4, .raised .b4b {height:2px; margin:0 1px;}
.raised .b1b {margin:0 5px; background:#999;}
.raised .boxcontent {display:block; background:#ccc; border-left:1px solid #fff; border-right:1px solid #999;}



/* Inset 3D Curved */
.inset {background: transparent; width:40%; margin:0 auto;}
.inset h1, .inset p {margin:0 10px;}
.inset h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.inset p {padding-bottom:0.5em;}

.inset .top, .inset .bottom {display:block; background:transparent; font-size:1px;}
.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {display:block; overflow:hidden;}
.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {height:1px;}
.inset .b2 {background:#ccc; border-left:1px solid #999; border-right:1px solid #aaa;}
.inset .b3 {background:#ccc; border-left:1px solid #999; border-right:1px solid #ddd;}
.inset .b4 {background:#ccc; border-left:1px solid #999; border-right:1px solid #eee;}
.inset .b4b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #fff;}
.inset .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #fff;}
.inset .b2b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #fff;}


.inset .b1 {margin:0 5px; background:#999;}
.inset .b2, .inset .b2b {margin:0 3px; border-width:0 2px;}
.inset .b3, .inset .b3b {margin:0 2px;}
.inset .b4, .inset .b4b {height:2px; margin:0 1px;}
.inset .b1b {margin:0 5px; background:#fff;}

.inset .boxcontent {display:block; background:#ccc; border-left:1px solid #999; border-right:1px solid #fff;}

/* Chamfer Borders*/
</style>
</head>

<body>
<div id="krazy_container">
<div class="raised">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
<h1>3D Raised</h1>
<p>Rounded corners with raised borders</p>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>
<p></p>
<div class="inset">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
<h1>3D Inset</h1>
<p>Rounded corners with inset borders</p>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>
<p></p>
</div>
</body>
</html>
yiran5467 2007-08-22
  • 打赏
  • 举报
回复
带边框的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}
#xsnazzy h1 {font-size:2.5em; color:#fff;}
#xsnazzy h2 {font-size:2em;color:#06a; border:0;}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2 {padding-top:0.5em;}
#xsnazzy {background: transparent; margin:1em;}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#ccc; border-left:1px solid #08c; border-right:1px solid #08c;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; background:#ccc; border:0 solid #08c; border-width:0 1px;}
</style>
</head>

<body>
<div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">
<h1>Snazzy Borders</h1>
<p>Based on Nifty Corners By Alessandro Fulciniti<br />http://pro.html.it/esempio/nifty/</p>

<h2>Rounded borders without images</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
</body>
</html>
yiran5467 2007-08-22
  • 打赏
  • 举报
回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
.curvy {position:relative; width:250px; background:#9caf9c; color:#000; margin:5em auto; font-size:14px;

font-family:Arial,sans-serif;}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#9caf9c; background:#fff; overflow:hidden;

font-style:normal; z-index:1;}
#ctl {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}
.curvy em b {position:absolute; font-size:150px; font-family:arial; color:#9caf9c; line-height:40px; font-weight:normal;}
#ctl b {left:-8px;}
#ctr b {left:-25px;}
#cbl b {left:-8px; top:-17px;}
#cbr b {left:-25px; top:-17px;}
.curvy p {position:relative; z-index:100; padding:5px 10px;}
</style>
</head>

<body>
<div class="curvy">
<em id="ctl"><b>•</b></em>
<em id="cbl"><b>•</b></em>
<em id="ctr"><b>•</b></em>
<em id="cbr"><b>•</b></em>
<p>I know it's been done before, but not this way!<br />A box with curved corners into which you can put text that goes right

up to the corners.</p>
</div>
</body>
</html>
ltzhh 2007-08-22
  • 打赏
  • 举报
回复
搜索 圆角表格 会有答案

或者 到 www.jscode.cn看看

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧