首先看样式表文件：
.b1 {height:1px; font-size:1px; overflow:hidden; display:block; background:#000; margin:0 5px;}
.b2 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff;
border-right:2px solid #000; border-left:2px solid #000; margin:0 3px;}
.b3 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff;
border-right:1px solid #000; border-left:1px solid #000; margin:0 2px;}
.b4 {height:2px; font-size:1px; overflow:hidden; display:block; background:#fff;
border-right:1px solid #000; border-left:1px solid #000; margin:0 1px;}
接着看页面代码：
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
当然你也可以用其他的标签<div>或者<span><a>之类，应该也是可以的
分享到：
相关推荐
可变高宽的圆角框，html+css！圆角技术
使用CSS3强大的圆角（border）属性，配合CSS中的:before伪元素就可以轻松绘制一个“心”型图案，省去了加载图片，并且可以自定义颜色等。在不支持CS
如果要想在IE浏览器中实现圆角的效果，我们一般都会采用圆角图片的方式。...让IE支持CSS 3的解析方法有很多种，下面介绍一种实用的让IE支持CSS 3解析的方法——IE利用VML矢量可标记语言作为画笔绘出圆角：
纯javascript的圆角边框设计，通杀主流的浏览器(FF,IE,Safri,Chrome)，比纯CSS实现的圆角来得更简单。
2.6 日与夜——包含圆角的设计 2.7 Si6—— 包含倾斜的设计 2.8 清茶时光——装饰性设计 2.9 爱之空气——流体布局 2.10 谷香——食品主题设计 2.11 城市——建筑主题设计 2.12 ...
2.1 “CSS禅意花园”简介 2.2 郊野——两列布局 2.3 像素画——三列布局 2.4 百合池塘——三列布局变体 2.5 郁金香——多列布局 2.6 日与夜——包含圆角的设计 2.7 Si6——包含倾斜的设计 2.8 清茶...
border-radius CSS3中的代表——第一个在社区中得到广泛使用新属性。这意味着，除去Internet Explorer 8及更低版本，所有的浏览器可以显示圆角。为了使样式能正确应用，需要为Webkit和Mozilla内核添加前缀。 CSS ...
盒子模型、标准流、浮动、定位创建主流流览器全兼容的网站：IE 6/UE 7/ Firefox讲解各类网页布局方法：固定宽度布局、变宽布局制作流行的网页元素：导航、菜单、圆角、面板为学习者提供：CSS常用单词英汉对照表内容...
边框样式设置——圆角边框，内边距演示，边框的样式，对每一条边框设置样式 基本选择器——before&after,first_line,first_letter,selection,基本选择器 结构伪类选择器——empty,first_child,nth_child&nth_last_...
),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准应用之先驱——闪客帝国... [显示全部] 《CSS网站布局实录:基于Web标准的网站设计指南...
本文实例讲述了js+css实现的圆角边框TAB选项卡滑动门效果。实例包含两款CSS圆角代码，可鼠标点击，也可鼠标移动上去显示效果，分享给大家供大家参考。具体如下： 运行效果图：——————-查看效果——————- ...
最近在整理学习CSS3的一些小知识，现在已经整理了CSS3选择器，CSS3圆角和CSS3元素阴影属性的使用方法了。今天为大家整理一下CSS3中的文字阴影——text-shadow的使用方法。希望能对大家有所帮助吧。 一、text-shadow...
尽管把玩CSS3是很有趣的事情——就像接下来我要演示的几篇教程中表现的那样，但是需要了解的是，CSS3并没有被当前浏览器完全的支持。也就是说，如果你要在你的网站中使用CSS3，请确认有针对不支持CSS3的浏览器的兼容...
中文名: 网页设计与制作——Flash Dreamweaver Firework 作者: 吴超英 资源格式: PDF 版本: 文字版 出版社: 高等教育出版社书号: 9787040151572发行时间: 2004年01月 地区: 大陆 语言: 简体中文 简介: 内容简介...
运行效果图： ——————————–效果演示 源码下载———————————- 鼠标经过方形图片切换成圆边效果 点击图片会弹出浮层 为大家分享的jQuery鼠标经过方形图片切换成圆边效果代码如下 <head>...