主站
经典论坛
家园
作品集
Think.Pages
维基
桌面
聚合
注册
登录
专长会员
帮助
客服QQ:6650171
经典论坛
»
前台制作与脚本专栏
» CSS做圆角,求制作讲解。
‹‹ 上一主题
|
下一主题 ››
发新话题
发布投票
发布商品
发布悬赏
发布活动
发布辩论
发布视频
打印
CSS做圆角,求制作讲解。
djw19860705
[楼主]
新手上路
帖子
11
体力
31
威望
0
离线
304 天
个人空间
发短消息
加为好友
1
#
大
中
小
发表于 2007-11-6 14:44
CSS做圆角,求制作讲解。谁讲一个,怎么做才最好用最简单。一种是在a{}中用的。也就是超链接后都改变背景的。一种是单一的能像很多网页中样边上的圆角。谁讲一个嘛。谢谢了。
积分
31
阅读权限
10
在线时间
2 小时
注册时间
2007-10-29
最后登录
2007-11-8
查看详细资料
TOP
做西部数码代理.Cn1元国际45元
|
将虚拟化进行到底
cuikai
银牌会员
帖子
1525
体力
2042
威望
7
当前
北京 海淀区
离线
2 天
个人网站
发短消息
作品 4
加为好友
打分 5
专长
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>
崔凯加油:
www.uicss.cn
积分
2050
阅读权限
70
性别
男
在线时间
427 小时
注册时间
2007-8-27
最后登录
2008-9-5
查看个人网站
查看详细资料
TOP
【美橙超级G空间】688元绑定10个子目录
|
oracle工程师注册
marvellous
金翅擘海
版主
帖子
11399
体力
26524
威望
140
个人空间
发短消息
加为好友
打分 12
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 -->
提示:您可以先修改部分代码再运行
┏┯┓┏┯┓┏┯┓┏┯┓
┠
知
┨┠
往
┨┠
观
┨┠
来
┨
┗┷┛┗┷┛┗┷┛┗┷┛
积分
26664
阅读权限
100
性别
男
在线时间
3980 小时
注册时间
2004-6-28
最后登录
2008-9-7
查看详细资料
TOP
请大家尊重和保护奥运知识产权。
djw19860705
[楼主]
新手上路
帖子
11
体力
31
威望
0
离线
304 天
个人空间
发短消息
加为好友
4
#
大
中
小
发表于 2007-11-6 15:08
太谢谢了。我慢慢看。代码多了点/
积分
31
阅读权限
10
在线时间
2 小时
注册时间
2007-10-29
最后登录
2007-11-8
查看详细资料
TOP
还在为头像烦恼?还在为不能关注好友动态烦忧?快来
蓝色理想家园
吧!
tianyazjq110
中级会员
帖子
142
体力
305
威望
1
离线
1 天
个人空间
发短消息
加为好友
打分 1
5
#
大
中
小
发表于 2007-12-7 10:59
感觉都挺复杂的..弄个背景进去不就可以了..写一堆代码做什么啊...总不至于一个早上就搞个圆角啊.....
积分
306
阅读权限
30
在线时间
97 小时
注册时间
2007-6-28
最后登录
2008-9-6
查看详细资料
TOP
‹‹ 上一主题
|
下一主题 ››
版块跳转
内部交流区
网站开发区
前台制作与脚本专栏
后台数据库编程
WEB标准化专栏
WAP 技术专栏
平面设计区
艺术与设计论坛
Adobe Photoshop 专栏
Fireworks 专栏
矢量图形专栏
插画手绘交流
交互设计区
用户体验综合版
UI图形设计
RIA设计与应用
Flash 8 及之前版本
Flash CS3 及 AS3
Silverlight 专版
Director 专栏
其它技术讨论区
计算机技术
英语学习和技术翻译
摄影欣赏与技术交流
无线通讯与数码设备
信息平台
企业招聘
学习工作交流区
创业版