<!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=utf-8" />
<title>不用图像文件的圆角解决方法</title>
<style type="text/css">
ul{
height:26px;
margin:0;
padding:10px;
list-style-type:none;
background:#ddd;
}
.item{
float:left;
width:100px;
margin:0 -1px 0 0;
padding 0;
font: 14px Arial;
font-weight:bold;
}
.item p{
padding:0 0 2px 0;
margin:0px;
text-align:center;
background:#cc6;
border:solid 1px #000;
border-top-width:0;
}
.item div{
height:1px;
overflow:hidden;
background:#cc6;
border-left:solid 1px #000;
border-right:solid 1px #000;
}
.item .row1{
margin:0 5px;
background:#000;
}
.item .row2{
margin:0 3px;
border:0 2px;
}
.item .row3{
margin:0 2px;
}
.item .row4{
margin:0 1px;
height:2px;
}
.item a , .item a:visted{
display:block;
color:#000;
text-decoration:none;
}
.item a:hover{
background:transparent;
}
.item a:hover p{
background:#884;
color:#fff;
}
.item a:hover .row2,
.item a:hover .row3 ,
.item a:hover .row4{
background:#884;
}
</style>
</head>
<body>
<ul>
<li class="item"><a href="#">
<div class="row1"></div> <div class="row2"></div>
<div class="row3"></div> <div class="row4"></div>
<p>首页</p>
</a>
</li>
<li class="item"><a href="#">
<div class="row1"></div> <div class="row2"></div>
<div class="row3"></div> <div class="row4"></div>
<p>导航一</p>
</a>
</li>
<li class="item"><a href="#">
<div class="row1"></div> <div class="row2"></div>
<div class="row3"></div> <div class="row4"></div>
<p>导航二</p>
</a>
</li>
<li class="item"><a href="#">
<div class="row1"></div> <div class="row2"></div>
<div class="row3"></div> <div class="row4"></div>
<p>导航三</p>
</a>
</li>
</ul>
</body>
</html>
效果图：
领悟：只是通过row*的类一层一层住下叠，从窄到宽的长度让人看起来像是圆角。也是一种笨的还有些有用处的方法。一直不建议使用。
相关推荐
图片文件的生成、更新、编写网页代码，这些工作都不再需要了。 * 提高网页性能。由于不必再发出多余的HTTP请求，网页的载入速度将变快。 * 增加视觉可靠性。某些情况下（网络拥堵、服务器出错、网速过慢等等），...
在网頁制作时，圆角的样式在很多时候都要到，大多数都是用图片来搞，其实图片不图片无所谓的，但也有的朋友比较喜欢用CSS来写，CSS写的话在火狐、谷歌等浏览器都是没有问题的。但是在IE下就会出现问题，圆角就没有了...
移动实例手把手—让图片像电影动起来.html 演示让图片像电影动起来。 第11章（源代码\第11章） 示例描述：本章演示网页多媒体标记的用法。 多媒体基本语法.html 多媒体基本语法。 多媒体循环播放.html ...
图片压大小缩尺寸，按指定大小或尺寸压缩图片，图片转灰度黑白，MP3标签信息的显示与重写，给图片添加竖向/倒向/任意角度文字或图片水印，对图片进行相对/绝对、区域/保留/固定(圆角矩形、椭圆、圆形裁剪)、按大小、...
img.JPG onblur事件中加载的图片文件。 第8章（\c08） 示例描述：学习JavaScript中的document对象。 8.1.html 得到文档锚点对象数组。 8.2.html 获取并设置cookie信息。 8.3.html 获取文档标记的...
有种古朴风格的圆角焦点图切换特效，运用Flash技术，结合HTML和JS来实现，实际运行效果要比截图漂亮，四角...这个焦点图的模式是固定的，调用的是外部的图片，图片路径和链接信息在XML文件中设置，相信你一看就懂了。
针对美食静态网页设计项目，...7. 图片和文本内容：根据项目需求，添加美食相关的图片和文本内容，可以使用CSS设置图片的样式（如大小、边框、圆角等）和文本的样式（如字体、对齐方式、行高等）。 8. 样式细节设计：
相信不少朋友会喜欢这一款菜单，CSS+JS实现的圆角下拉菜单，没有使用任何修饰性的图片哦，圆角完全是用JS完成的，因此代码多了些，想使用的朋友把JS文件提取出来另存，这样更合理些。 运行效果截图如下： 在线演示...
样式文件只有一行，脚本文件只有2358个字符长度，图片文件仅有jy_black.png。 图片文件请先粘贴在你的images文件夹下，样式脚本你可以单独引入，但更推荐把样式插入到你的通用样式文件中(注意背景图片的地址要正确)...
14.3 为元素创建圆角 281 14.4 为文本添加阴影 284 14.5 为其他元素添加阴影 285 14.6 应用多重背景 288 14.7 使用渐变背景 290 14.8 为元素设置不透明度 295 14.9 生成内容的效果 297 14.10 ...
内容索引:脚本资源,CSS特效,CSS圆角特效 CSS圆角效果，看着很舒服，CSS+JS相结合打造出的效果，没有用到任何背景图片。只要引入一个JS文件，就可以无限制的使用这种效果了。
内容索引:脚本资源,CSS特效,CSS圆角 这是一个用到有图片、JavaScript的CSS圆角布局实例，压缩包中包含有用到的的有文件，带有阴影效果，有喜欢可下载一试。
在绘制时缩放图像与保持原样之间的对比 217 4.9.3 遍历图像数据 218 4.10 放大镜 222 4.10.1 使用离屏canvas 224 4.10.2 接受用户从文件系统中拖放进来的图像 225 4.11 视频处理 227 4.11.1 视频格式 227 ...
2：建立群组，发送群组消息，图片文件等 3：界面实现了阴影圆角界面 4：最近联系人之间发送消息 5：未读消息提示 技术特点 源码包括三部分 1、客户端：使用了WinForm内嵌Xilium.CefGlue的方式开发，通过自定义...
二、功能介绍 1：组织机构间发送即时信息，离线消息，2：建立群组，发送群组消息，图片文件等 3：界面实现了阴影圆角界面4：最近联系人之间发送消息 5：未读消息提示 软件源码包括三部分 1、客户端：使用了...
检测文件是否图片 检测是否可以以网页形式显示 检测是否序列化后的字符串 模仿JAVASCRIPT的ESCAPE和UNESCAPE函数的功能 用curl函数读取远程文件 用file_getcontents提交数据 用php生成扭曲，有角度的验证图片...
10.3.4 圆角效果 10.3.5 其他库 10.4 行为增强 10.5 小结 第11章 丰富的Mashup！运用API添加地图、搜索及更多功能 11.1 API密钥 11.2 客户端API：离不开JavaScript 11.2.1 ...
10.3.4 圆角效果 10.3.5 其他库 10.4 行为增强 10.5 小结 第11章 丰富的Mashup！运用API添加地图、搜索及更多功能 11.1 API密钥 11.2 客户端API：离不开JavaScript 11.2.1 ...