源码:

<!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. 【OI新闻】2016.10.06

    今天有人说好多OJ都狗记邓了- 翻了一下,恭喜以下OJ赢得大奖,获得狗记邓徽章一枚 一等奖Codevs 二等奖Bzoj 三等奖洛谷 后记-感悟 如果正在为OJ发愁的朋友,不要悲伤,不要心急,换一换OJ ...

  2. Codeforces Round #395 (Div. 1)

    比赛链接:http://codeforces.com/contest/763 A题: #include <iostream> #include <cstdio> #includ ...

  3. 洛谷 P2038 无线网络发射器选址 —— 二维树状数组

    题目:https://www.luogu.org/problemnew/show/P2038 大水题暴露出我的愚蠢. 用二维树状数组,然而居然忘了它应该那样写,调了一个小时: 正方形可以超出外面,只要 ...

  4. 洛谷 P2615 神奇的幻方 —— 模拟

    题目:https://www.luogu.org/problemnew/show/P2615 直接按题意模拟即可; 用 Emacs 做的第一道题! 代码如下: #include<iostream ...

  5. C#面向过程之冒泡排序

    //定义一个数组,准备冒泡排序 ,,-,,,,-,}; //定义一个中间变量 ; //n个数字比较需要进行n-1次比较 ; j < arr.Length - - i; j++) { //每一趟的 ...

  6. MySQL基础 — 常用命令

    一.连接MySQL 格式: mysql -h主机地址 -u用户名 -p用户密码 1.连接到本机上的MySQ: 首先在打开cmd窗口,输入mysql -uroot -p ,然后空格进入MySQL控制台, ...

  7. VBNET AUTOCAD NETAPI 让插件随autocad启动

    定义一个函数,随AutoCAD 启动加载当前程序集到autocad,涉及到写入注册表,注意这是在autocad内部加载dll之后处理的方法.... 写入HKLM表示所有登录的用户都会受影响(autoc ...

  8. javascript实现页面跳转

    这里指的页面跳转是将浏览器标签页转到新的网址. 只需要使用 window.location.href="url" 就行了 示例 <!DOCTYPE html> < ...

  9. Linux学习笔记之Linux目录结构、磁盘命名、启动过程

    1.Linux磁盘命名规则 名称的起名规则——/dev/xxyN: 1.Linux下装所有硬件设备的一个目录叫 /dev(devices) 2.Linux没有C盘.D盘.Linux最根上的一个目录叫  ...

  10. Android 性能优化（10）网络优化（ 6）Optimizing General Network Use

    Optimizing General Network Use This lesson teaches you to Compress Data Cache Files Locally Optimize ...