源码:

<!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. 【Codevs1080】质数环

    http://codevs.cn/problem/1031/ 不讲什么,预处理素数+搜索 // <C.cpp> - Sun Oct 9 12:58:23 2016 // This file ...

  2. Notification操作大全

    目录 一:普通的Notification Notification 的基本操作 给 Notification 设置 Action 更新 Notification 取消 Notification 设置 ...

  3. Lexer and parser generators (ocamllex, ocamlyacc)

    Chapter 12 Lexer and parser generators (ocamllex, ocamlyacc) This chapter describes two program gene ...

  4. 51Nod 1522 上下序列 —— 区间DP

    题目:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1522 区间DP,从大往小加: 新加入一种数有3种加法:全加左边,全 ...

  5. 配置文件git config介绍

    Git有一个工具被称为git config,它允许你获得和设置配置变量:这些变量可以控制Git的外观和操作的各个方面. 一. 配置文件的存储位置 这些变量可以被存储在三个不同的位置: 1./etc/g ...

  6. 12. Ext.Ajax 对ajax的支持

    转自:http://www.cnblogs.com/lipan/archive/2011/12/09/2272793.html 本篇主要介绍一下ExtJs常用的几个对JS语法的扩展支持,包括Ajax封 ...

  7. Java 添加、回复、修改（替换）、删除Word批注

    批注是一种常用于对特定文档内容进行注解的工具或方法,起到解释说明.标记指正的作用.在本篇文章中,将介绍如何操作Word批注的方法,包括: 1. 添加批注:添加文本到批注.插入图片到批注: 2. 回复批 ...

  8. Springboot 相关注解大全

    1.Spring注解 1.@Autowired 标注在方法,Spring容器创建当前对象,就会调用方法,完成赋值:方法使用的参数,自定义类型的值从ioc容器中获取自动装配; Spring利用依赖注入( ...

  9. 制作并发布个人CocoaPods库

    随着对 CocoaPods 越来越多的依赖,我们也可以尝试把自己的库发布到它上面. 1.在Github上新建一个项目(名字我随便取了一个,其他步骤截图为WCUIKit).自己做相应修改即可. 2.克隆 ...

  10. Android 性能优化（1）性能工具之「 lint 」 ：Improving Your Code with lint：优化代码

    Improving Your Code with lint 1.See Also lint (reference) Using Android Annotations In addition to t ...