<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title>纯css圆角</title>

    <style type="text/css">

    #xsnazzy h1,#xsnazzy h2,#xsnazzy p{margin:0 10px;letter-spacing:1px;}

    #xsnazzy h1{font-size:2.5em;color:#fff;}

    #xsnazzy h2{font-size:2em;color:#06a;border:0;}

    #xsnazzy p{padding-bottom:0.5em;}

    #xsnazzy h2{padding-top:0.5em;}

    #xsnazzy{background:transparent;margin:1em;}

    .xtop,.xbottom{background:transparent;font-size:1px;}

    .xb1,.xb2,.xb3,.xb4{overflow:hidden;}

    .xb1,.xb2,.xb3{height:1px;}

    .xb2,.xb3,.xb4{background:#ccc;border-left:1px solid #08c;border-right:1px solid #08c;}

    .xb1{margin:0 5px;background:#08c;}

    .xb2{margin:0 3px;border-width:0 2px;}

    .xb3{margin:0 2px;}

    .xb4{height:2px;margin:0 1px;}

    .xboxcontent{background:#ccc;border:0 solid #08c;border-width:0 1px;}

    </style>

</head>

<body>

    <div id="xsnazzy">

        <div class="xtop">

            <div class="xb1"></div>

            <div class="xb2"></div>

            <div class="xb3"></div>

            <div class="xb4"></div>

        </div>

        <div class="xboxcontent">

            <h1>Snazzy Borders</h1>

            <p>Based on Nifty Corners By Alessandro Fulciniti<br />http://pro.html.it/esempio/nifty/</p>

            <h2>Rounded borders without images</h2>

            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibheuismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enimad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nislut aliquip ex ea commodo consequat.</p>

            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

        </div>

        <div class="xbottom">

            <div class="xb4"></div>

            <div class="xb3"></div>

            <div class="xb2"></div>

            <div class="xb1"></div>

        </div>

    </div>

</body>

</html>

兼容性很好的纯css圆角的更多相关文章

  1. 大神写的一个纯CSS圆角框，膜拜！（支持IE9一下的低版本）

    留着提醒自己,底层才是最重要的,不要一直傻瓜的编程下去! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  2. 传说中的纯CSS圆角代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  3. CSS+JS实现兼容性很好的无限级下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...

  4. 纯css就能实现可点击切换的轮播图，feel起来很丝滑

    前言 轮播图经常会在项目里用到,但是实际上用到的轮播图都是比较简单的,没有复杂的特效,这个时候如果去引入swiper那些库的话,未免就有点杀鸡焉用牛刀了. 所以不如自己手写一个,而今天我要分享的一种写 ...

  5. 简单而兼容性好的Web自适应高度布局，纯CSS

    纯CSS实现的自适应高度布局,中间内容不符自动滚动条.兼容IE9以上.chrome.FF.关键属性是box-sizing: border-box. 不废话,直接上代码: <!doctype ht ...

  6. 贴心小技能——纯CSS实现的帮助提示

    1. 新技能传授---哒哒哒哒 我们经常会接到这样的小需求,鼠标放在某个位置实现一段小提示. 你还在用js实现这样一个小功能,你就太out了,来看看我们用纯CSS打造的帮助提示. 2. html &l ...

  7. 纯CSS实现各类气球泡泡对话框效果

    原文 纯CSS实现各类气球泡泡对话框效果 一.关于纯CSS实现气泡对话框 首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一 ...

  8. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

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

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

随机推荐

  1. bus实现兄弟组件传值

    传递的地方:两个组件都要引入这个公共的bus中转函数 Bus.js文件相当于一个公共的对象: 传递的文件中写入这个方法: 兄弟组件通过点击事件输出参数,需要的组件来接收传递过来的参数:

  2. namecheap域名设置Cloudflare为第三方DNS

    待更……等我搞完了就来写总结

  3. luogu P4156 [WC2016]论战捆竹竿

    传送门 官方题解(证明都在这) 神仙题鸭qwq 转化模型,发现这题本质就是一个集合,每次可以加上集合里的数,问可以拼出多少不同的数 首先暴力需要膜意义下的最短路,例题戳这 然后这个暴力可以优化成N^2 ...

  4. 第25月第8天 100-Days-Of-ML-Code

    1.100-Days-Of-ML-Code https://github.com/Avik-Jain/100-Days-Of-ML-Code https://github.com/llSourcell ...

  5. new、override关键字

    1.如果我想彻底覆盖父类的方法,此时可以使用override .假有classB继承自classA,代码如下: public class B : A { public bool _flag; publ ...

  6. 高德地图 location字段控制台显示 为字符串类型 实际为对象

    help大神求指导 ? 高德地图new amap.PoiManager() 的 autoComplete方法 location字段控制台显示 为字符串类型 实际为对象 debugger过程入下图:

  7. 推荐前端框架 & 模板

    BootStrap Semantic UI Pure Amazeui(前后端都有,很丰富) amazeui http://tpl.amazeui.org AdminLTE AdminLTE https ...

  8. 浏览器修改或添加Cookie--chrome插件【edit this cookie】、【postman】

    需求背景:某天用浏览器请求某个 API 提示: {"RESULT_TYPE" : -1 , "STATE" : 401 , "RESULT_DESC& ...

  9. CentOS7 设置主机名及IP映射

    1.设置主机名 查看本机的主机名,使用如下三个命令中任意一个即可 # hostname # uname -n # cat /proc/sys/kernel/hostname 使用 vi 编辑器打开 / ...

  10. 【转载】双调排序Bitonic Sort，适合并行计算的排序算法

    双调排序是data-independent的排序, 即比较顺序与数据无关的排序方法, 特别适合做并行计算,例如用GPU.fpga来计算. 1.双调序列 在了解双调排序算法之前,我们先来看看什么是双调序 ...