<!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. B - 签到题

    计算机系统中使用的UTC时间基于原子钟,这种计时方式同“地球自转一周是24小时”的计时方式有微小的偏差.为了弥补这种偏差,我们偶尔需要增加一个“闰秒”. 最近的一次闰秒增加发生在UTC时间2016年的 ...

  2. html页面高度问题

    首先,上图 说明 1. clientHeight大部分浏览器对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,即然是指可看到内 ...

  3. git 重命名 origin

    git remote rename origin old-origin git remote add origin https://gitlab.com/wuxianqiang/my-project. ...

  4. python中读取mongodb数据并保存为csv格式的文件

    import pandas as pd import matplotlib.pyplot as plt import pymongo %matplotlib inline # 连接mongodb数据库 ...

  5. 非关系型数据库mongodb的语法模式

    from pymongo import MongoClient #连接 conn = MongoClient() #进入数据库 db = conn.edianzu #连接mydb数据库,没有则自动创建 ...

  6. 简单的复用accep

    s = socket.socket() adress = ("192.168.15.102", 9999) s.bind(adress) s.listen() s.setblock ...

  7. 6-12mysql库的操作

    1,mysql库的各种分类: nformation_schema: 虚拟库,不占用磁盘空间,存储的是数据库启动后的一些参数,如用户表信息.列信息.权限信息.字符信息等. performance_sch ...

  8. ES6 基础

    转载自:ES6 基础 一.新的变量声明方式 let/const 与var不同,新的变量声明方式带来了一些不一样的特性,其中最重要的两个特性就是提供了块级作用域与不再具备变量提升. 通过2个简单的例子来 ...

  9. Callable的用法示例

    //Runnable是执行工作的独立任务,但是它不返回任何值.在JavaSE5中引入的Callable是一种具有类型参数的泛型,它的类型参数表的是从方法call()中返回的值,并且必须使用Execut ...

  10. 自动安装gulpfile中所有依赖的模块

    在gulpfile.js中定义任务的时候,需要引用不同的模块,这些模块需要使用 npm install --save-dev 命令进行安装,非常的繁琐.可以使用一个名为gulpfile-install ...