源码:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style>

        .b1, .b2, .b3, .b4, .b5, .b6, .b7, .b8 {

            height:1px;

            font-size:1px;

            overflow:hidden;

            display:block;

        }

        .b1, .b8 {

            margin:0 5px;/*上下0，左右5*/

        }

        .b2, .b7 {

            margin:0 3px;

            border-right:2px solid;

            border-left:2px solid;

        }

        .b3, .b6 {

            margin:0 2px;

            border-right:1px solid;

            border-left:1px solid;

        }

        .b4, .b5 {

            margin:0 1px;

            border-right:1px solid;

            border-left:1px solid;

            height:2px;

        }

        .sharp {

            float:left;

            margin:20px auto 0;

            margin-right:20%;

            padding:1px;

        }

        .content {

            height:180px;

            border-right:1px solid;

            border-left:1px solid;

            overflow:hidden;

            width:160px;

        }

        /*蓝色边框*/

        .color .b1, .color .b2, .color .b3, .color .b4, .color .b5, .color .b6, .color .b7, .color .b8,

        .color .content {

            border-color:blue; /*边框色*/

        }

        .color .b1, .color .b8 {

            background-color:blue;/*背景色*/

        }

        .color .b2, .color .b3, .color .b4, .color .b5, .color .b6, .color .b7,

        .color .content {

            background-color:#eff7ff;

        }

    </style>

</head>

<body>

    <div class="sharp color">

        <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>

        <div class="content"></div>

        <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>

    </div>

</body>

</html>

效果:

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMUAAADeCAIAAAACS1P/AAAClUlEQVR4nO3SMQ6DQBAEQf7/WYcO7YAHGKQ+kJcaVbw66Xr7mHXb7n6AjZqerJyerJyerJyerJyerJyerJyerJyerJyerJyerJyerJyerJyerJyerNyJnraNCZbu0Pn9Ha83Eyyt6vdhJY20KKkfV8U02Iqk9PRcV/ckpvHypPT0aHqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0p6oqQnSnqipCdKeqKkJ0qX9iSp2fKY9PRoN/QkqalWxHSopz0pVY2x/+ainTi8v4N/t3SLz9vDpicrpycrpycrpycrpycrpycrpycrpycrpycrpycrpycrpycrpycrpycrpycr9wViaUrJ7sWj3AAAAABJRU5ErkJggg==" alt="" />

在非ie浏览器中，可以设置border-radius属性来实现圆角效果。

css实现圆角效果的更多相关文章

  1. IE7,8纯css实现圆角效果

    众所周知,IE7,8不支持border-radius效果.但我们同样有办法用css实现这个效果,方法就是用border来模拟. <!DOCTYPE html> <html lang= ...

  2. css写圆角效果

    .introTips i{ position: absolute; display: block; top: 8px; right: 8px; width:; height:; font-size:; ...

  3. CSS圆角效果

    看了院子里一篇关于CSS圆角技巧的文章,试了一下,觉得很好,贴出练习的代码.优秀文章链接: http://www.cnblogs.com/luluping/archive/2010/06/26/176 ...

  4. css 圆角效果

    http://intacto10years.com/index_start.php<div style="width:800px; height:1300px;">&l ...

  5. css之outline实现圆角效果

    对,你没有看错,outline也可以实现圆角,不过请先读完自然会知道结果: ============================================================== ...

  6. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  7. 使用css3来实现边框圆角效果

    经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...

  8. 使IE6同样支持圆角效果

    之前写到过,IE6不支持:hover效果的解决办法,其它这个跟它一样.IE6(7/8)不支持border-radius属性,所以其中的圆角效果显示不出来,可以通过引用ie-css3.htc的方法解决. ...

  9. 用CSS做圆角矩形

    第一种方法:如果是CSS2.2的话,可以简单写一个制作圆角矩形,分上中下裁成三张图 <title>CSS3实现圆角</title> <style type="t ...

随机推荐

  1. LED全彩显示屏色度空间

    摘要:LED全彩显示屏.LED电子大屏幕如果要有一个良好的视觉效果,其中色度占有一席重要的位置,那么该如何让LED显示屏的色度更均匀.合理呢,下面为大家总结出以下几点,供大家参考. LED全彩显示屏. ...

  2. matlab进入指定目录

    cd C:\Users\hui\Desktop\minepy\1\minepy-1.2.0\minepy-1.2.0\matlab

  3. Linux中的LVM

    逻辑卷管理器,通过将另外一个硬盘上的分区加到已有文件系统,来动态地向已有文件系统添加空间的方法. 逻辑卷管理的核心是处理安装在系统上的硬盘分区.在逻辑卷管理的世界里,硬盘称作物理卷(Physical ...

  4. SQL Server 方言类型映射问题

    关于SQL Server的类型映射问题,例如,nvarchar无法进行hibernate类型映射,需要通过convert进行类型转换方可进行获取

  5. ngCordova插件说明

    转载自 http://my.oschina.net/u/1416844/blog/495026 参 考http://blog.csdn.net/superjunjin/article/details/ ...

  6. JavaScript编程艺术-第10章-10.1-动画

    10.1—最简单的动画 ***代码亲测可用*** 动画:让元素位置随着时间而不断地发生变化 HTML: <!DOCTYPE HTML> <html> <head> ...

  7. TFS修改了工作区

    计算机修改名字后,更换了TFS工作区,但原工作区的有些文件忘记签入: 解决方案: 删除原工作区即可,实现:到TFS工作区 - “管理工作区”,选中“显示远程工作区”,找到原工作区,删除即可.

  8. Python_购物车问题

    import os goods = [    {"name": "电脑", "price": 1999},    {"name&q ...

  9. D1-mini esp8266的资料备份

    需要更新esp8266库 http://arduino.esp8266.com/stable/package_esp8266com_index.json 下载好即可.

  10. 2014中秋节，用java为QQ游戏美女找茬写辅助

    引子        今年中秋闲在家,总要找点事做.        前几天开始学python,很早之前就有计划拿下这门语言了,可惜一直拖到现在……不可否认,我也是个拖沓症患者.在学习python的过程中 ...