源码:

<!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. Handle/Body pattern（Wrapper pattern）

    Handle Body Pattern 一些设计模式,通过一系列非直接的间接的方式(这种间接的方式,可称其为 handle(把手)),完成接口与实现(实现可称为 body(主体))的分离 Handle ...

  2. 使用HttpClient MultipartEntityBuilder 上传文件，并解决中文文件名乱码问题

    遇到一种业务场景,前端上传的文件需要经过java服务转发至文件服务.期间遇到了原生HttpClient怎么使用的问题.怎么把MultipartFile怎么重新组装成Http请求发送出去的问题.文件中文 ...

  3. 深入浅出Android makefile(2)--LOCAL_PATH（转载）

    转自:http://nfer-zhuang.iteye.com/blog/1752387 一.说明 上文我们对acp的Android.mk文件做了一个大致的描述,使得大家对Android.mk文件有了 ...

  4. bzoj [Usaco2010 Hol]cowpol 奶牛政坛【树链剖分】

    意识流虚树 首先考虑只有一个党派,那么可以O(n)求树的直径,步骤是随便指定一个根然后找距离根最远点,然后再找距离这个最远点最远的点,那么最远点和距离这个最远点最远的点之间的距离就是直径 那么考虑多党 ...

  5. Android框架式编程之EasyPermissions

    EasyPermission库是一个谷歌官方提供的简化基本的系统权限逻辑的库,可用于在Android M或者更高版本上. 官方项目地址:https://github.com/googlesamples ...

  6. mac 修改用户权限

    想安装thinkPHP 下载完以后 访问报403错误 于是百度找 也没找到原因 自己猜测是不是用户权限问题 就是下面目录为tp的用户权限 不是root 其他是root的都能访问 于是百度搜了权限如何修 ...

  7. 第三章 K近邻法(k-nearest neighbor)

    书中存在的一些疑问 kd树的实现过程中,为何选择的切分坐标轴要不断变换?公式如:x(l)=j(modk)+1.有什么好处呢?优点在哪?还有的实现是通过选取方差最大的维度作为划分坐标轴,有何区别? 第一 ...

  8. 常用JavaScript代码库（又名：WFang.js）

    1.根据公司项目封装ajax请求,结合layer框架一起使用 /*提取接口公共部分*/ var ApiConf = { server:"http://localhost:8080/Batte ...

  9. 406 Queue Reconstruction by Height 根据身高重建队列

    假设有打乱顺序的一群人站成一个队列. 每个人由一个整数对(h, k)表示,其中h是这个人的身高,k是排在这个人前面且身高大于或等于h的人数. 编写一个算法来重建这个队列.注意:总人数少于1100人.示 ...

  10. scala学习笔记1: scala method

    刚接触scala,做练习的时候碰到一个问题,顺便mark一下. 先看下面一段代码: def sum(args:Int*) = { var result = 0 for (arg <- args) ...