源码:

<!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. 【转载】Cookie/Session机制详解

    [本文转自]http://blog.csdn.net/fangaoxin/article/details/6952954/ 会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话. ...

  2. 基于Linux系统的Shell编程-基础篇

    1. Shell基础介绍 1.1 Shell编程的意义 为什么使用shell编程 节约时间 1.2 显示脚本执行过程 前面有+表示执行过的命令的 前面没有东西,表示输出到屏幕上的内容. [root@C ...

  3. oracle给用户授权

    1.在PLSQL里,用sys(oracle系统用户)登陆,登陆的时候一定要选择SYSDBA.普通用户登陆选择normal就可以了 2.创建用户 *也可以给普通用户授权为dba即数据库管理员.在导入导出 ...

  4. bzoj 4808: 马【匈牙利算法】

    网格图黑白染色,然后能互相攻击到的点之间连边,跑匈牙利算法最大匹配,答案是好点个数-最大匹配(最大独立集) 注意pao的时候只从一种颜色的格子统计即可 #include<iostream> ...

  5. 10.16NOIP模拟赛

    /* 我是一个大sb */ #include<iostream> #include<cstdio> #include<cstring> #include<qu ...

  6. 清北考前刷题day6下午好

    /* 贪心 负数一定不取 枚举最高位是1 且答案取为0的 位置, 更新答案. */ #include<iostream> #include<cstdio> #include&l ...

  7. [Swift]Array（数组）扩展

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  8. 为什么要用Go语言做后端

    FMZ数字货币量化平台 www.fmz.com, 后端使用Go语言,这里是创始人Zero谈论使用Go语言所带了的便利.原帖地址:https://www.zhihu.com/question/27172 ...

  9. 图片预览------photoswipe 使用

    photoswipe 使用 预览图片后,需要点击关闭按钮才能关闭,点击图片事件效果是放大图片,和微信的效果不一致,最后改用微信预览图片的接口了,但是例子可以用,记录一下!! http://www.cn ...

  10. java Class.getResource和ClassLoader.getResource

    http://www.cnblogs.com/wang-meng/p/5574071.html http://blog.csdn.net/earbao/article/details/50009241 ...