主站
经典论坛
家园
作品
品网
维基
桌面
聚合
注册
登录
专长会员
帮助
客服QQ:6650171
经典论坛
»
前台制作与脚本专栏
» CSS做圆角,求制作讲解。
‹‹ 上一主题
|
下一主题 ››
发新话题
发布投票
发布商品
发布悬赏
发布活动
发布辩论
发布视频
打印
CSS做圆角,求制作讲解。
djw19860705
[楼主]
新手上路
帖子
13
体力
35
威望
0
离线
24 天
发短消息
加为好友
1
#
大
中
小
发表于 2007-11-6 14:44
CSS做圆角,求制作讲解。谁讲一个,怎么做才最好用最简单。一种是在a{}中用的。也就是超链接后都改变背景的。一种是单一的能像很多网页中样边上的圆角。谁讲一个嘛。谢谢了。
积分
35
阅读权限
10
在线时间
3 小时
注册时间
2007-10-29
最后登录
2009-6-10
查看详细资料
TOP
西部数码VPS主机1G内存仅266元
cuikai
银牌会员
认证
帖子
2101
体力
2351
威望
9
当前
北京 海淀区
个人网站
发短消息
作品 4
加为好友
打分 6
专长
UI,前端制作,项目管理
2
#
大
中
小
发表于 2007-11-6 14:48
第一种
<html xmlns:v>
<head>
<style>
v\:*{behavior: url(#default#VML);}
</style>
</head>
<body>
<v:roundRect style="position:absolute;left:20px;top:50px;width:200px;height:140px;" FillColor="#e8e8e8" Filled="T" />
刷新本页才能看到效果
</body>
</html>
======================================
第二种
css圆角效果,IE6, firefox均显示正常
<html>
<head>
<title>css圆角效果</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<br>无图片实现圆角框<br><br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>
崔凯,前端开发,WordPress模板制作
积分
2408
阅读权限
70
性别
男
在线时间
719 小时
注册时间
2007-8-27
最后登录
2009-7-4
查看个人网站
查看详细资料
TOP
广州周立功诚聘—平面/网页/UI/工业设计师
|
天业互联-酷睿租用599¥
marvellous
金翅擘海
荣誉管理团队
帖子
13287
体力
27867
威望
143
当前
北京 朝阳区
个人空间
发短消息
加为好友
打分 15
3
#
大
中
小
发表于 2007-11-6 14:53
<STYLE type=text/css> #navigation { background:#99CCFF; width:715px; margin:0 auto; height:38px; /* hide overflow:hidden from IE5/Mac */ /* \*/ overflow: hidden; /* */ } #navigation ul { margin:0; padding:0; list-style-type:none; background:transparent; } #navigation li { display:block; float:left; margin:0 1px; } .snazzy { background:transparent; } .snazzy span { text-align:center; color:#fff; margin:0; font-weight: normal; } .b1, .b2, .b3, .b4 { display:block; font-size:1px; /* hide overflow:hidden from IE5/Mac */ /* \*/ overflow: hidden; /* */ } .b1, .b2, .b3 { height:1px; } .b2, .b3, .b4 { border-left:1px solid #fff; border-right:1px solid #fff; } .b1 { margin:0 5px; background:#fff; } .b2 { margin:0 3px; border-width:0 2px; } .b3 { margin:0 2px; } .b4 { height:2px; margin:0 1px; } .boxcontent { display:block; border-left:1px solid #fff; border-right:1px solid #fff; } a.menu, a.menu:visited { display:block; text-decoration:none; width:100px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; } a.current span, a.current:visited span { padding-top:10px; } a.menu:hover { background:transparent; cursor:pointer; } a.current:hover { cursor:default; } a.menu:hover span { padding-top:10px; } .red {background:#c00;} .orange {background:#f90;} .yellow {background:#b8b800;} .green {background:#090;} .blue {background:#00c;} .indigo {background:#309;} .violet {background:#c6c;} .lace {background:#e0e0d5;} .slate {background:#bcdae9;} .salmon {background:#ffa07a;} .mint {background:#f5fffa;} </STYLE> </head> <body> <center> <DIV id=navigation> <UL> <LI><A class=menu title="AccessKey: a" accessKey=a href="../menu/index.html"><B class=snazzy><SPAN class="boxcontent red">Demos</SPAN> <B class="b4 red"></B><B class="b3 red"></B><B class="b2 red"></B><B class=b1></B></B></A></LI> <LI><A class=menu title="AccessKey: b" accessKey=b href="../menus/index.html"><B class=snazzy><SPAN class="boxcontent orange">Menus</SPAN> <B class="b4 orange"></B><B class="b3 orange"></B><B class="b2 orange"></B><B class=b1></B></B></A></LI> <LI><A class="menu current" title="AccessKey: c" accessKey=c href="#nogo"><B class=snazzy><SPAN class="boxcontent yellow">Layouts</SPAN> <B class="b4 yellow"></B><B class="b3 yellow"></B><B class="b2 yellow"></B><B class=b1></B></B></A></LI> <LI><A class=menu title="AccessKey: d" accessKey=d href="../boxes/index.html"><B class=snazzy><SPAN class="boxcontent green">Boxes</SPAN> <B class="b4 green"></B><B class="b3 green"></B><B class="b2 green"></B><B class=b1></B></B></A></LI> <LI><A class=menu title="AccessKey: e" accessKey=e href="../mozilla/index.html"><B class=snazzy><SPAN class="boxcontent blue">Mozilla</SPAN> <B class="b4 blue"></B><B class="b3 blue"></B><B class="b2 blue"></B><B class=b1></B></B></A></LI> <LI><A class=menu title="AccessKey: f" accessKey=f href="../ie/index.html"><B class=snazzy><SPAN class="boxcontent indigo">Explorer</SPAN> <B class="b4 indigo"></B><B class="b3 indigo"></B><B class="b2 indigo"></B><B class=b1></B></B></A></LI> <LI><A class=menu title="AccessKey: g" accessKey=g href="../opacity/index.html"><B class=snazzy><SPAN class="boxcontent violet">Opacity</SPAN> <B class="b4 violet"></B><B class="b3 violet"></B><B class="b2 violet"></B><B class=b1></B></B></A></LI></UL> </DIV><!-- end of navigation -->
提示:您可以先修改部分代码再运行
┏┯┓┏┯┓┏┯┓┏┯┓
┠
知
┨┠
往
┨┠
观
┨┠
来
┨
┗┷┛┗┷┛┗┷┛┗┷┛
积分
28010
阅读权限
100
性别
男
在线时间
5438 小时
注册时间
2004-6-28
最后登录
2009-7-4
查看详细资料
TOP
认证您的手机
,获得手机认证图标
, 更多
手机认证的好处
djw19860705
[楼主]
新手上路
帖子
13
体力
35
威望
0
离线
24 天
发短消息
加为好友
4
#
大
中
小
发表于 2007-11-6 15:08
太谢谢了。我慢慢看。代码多了点/
积分
35
阅读权限
10
在线时间
3 小时
注册时间
2007-10-29
最后登录
2009-6-10
查看详细资料
TOP
用CSS布局建站从零开始
|
Photoshop中打造史诗般梦幻场景
|
05年第一次软件行业创业的惨痛教训
tianyazjq110
梦的河流
中级会员
帖子
199
体力
430
威望
1
离线
2 天
个人空间
发短消息
加为好友
打分 1
5
#
大
中
小
发表于 2007-12-7 10:59
感觉都挺复杂的..弄个背景进去不就可以了..写一堆代码做什么啊...总不至于一个早上就搞个圆角啊.....
积分
431
阅读权限
30
在线时间
161 小时
注册时间
2007-6-28
最后登录
2009-7-2
查看详细资料
TOP
‹‹ 上一主题
|
下一主题 ››
版块跳转
内部交流区
网站开发区
前台制作与脚本专栏
后台数据库编程
WEB标准化专栏
WAP 技术专栏
平面设计区
艺术与设计论坛
Adobe Photoshop 专栏
Fireworks 专栏
矢量图形专栏
插画手绘交流
交互设计区
用户体验综合版
UI图形设计
RIA设计与应用
Flash 专栏
Silverlight 专版
Director 专栏
其它技术讨论区
计算机技术
英语学习和技术翻译
摄影欣赏与技术交流
无线通讯与数码设备
信息平台
企业招聘
学习工作交流区
体育运动、线下活动与游戏
创业版