<!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. ThinkPHP5.0.21&5.1.* 代码执行和命令执行漏洞利用

    ThinkPHP5.0.21&5.1.* 代码执行和命令执行漏洞利用 ThinkPHP5.0.21&5.1.*  exploit code execution and command ...

  2. web 安全知识点

    XSS 新手指南:DVWA-1.9全级别教程(完结篇,附实例)之XSS https://www.jianshu.com/p/303206ae2471 https://www.netsparker.co ...

  3. 分页插件通用处理，以asp.net mvc为例

    Model: public class PaggerModel { public PaggerModel() { BarSize = ; } public PaggerModel(int total, ...

  4. .Net Core 配置文件appsettings

    1.配置文件为appsettings 在appsettings添加ConnectionStrings: { "Logging": { "IncludeScopes&quo ...

  5. 【父元素parent】【子元素children】【同胞siblings】【过滤】

    1.父元素 $("span").parent()           //定位到span的父元素 $("span").parents()          // ...

  6. netty 在线教程

    https://blog.csdn.net/qq_33314107/article/details/81321438 https://www.cnblogs.com/myJavaEE/p/679333 ...

  7. Django学习手册 - 创建Django工程项目以及APP

    前置步骤: 下载python,django 并且安装好 python 解释器以及django模块. 整体步骤阐述: 创建django工程项目 步骤一:进入安装的python目录 步骤二:输入创建工程的 ...

  8. vue 学习笔记—Es6

    // 第一部分 /* console.log(a+'c'); var a = 1; console.log(b+'c'); let b =1; */ // 上述代码 left定义报错 原因: /* v ...

  9. 20165234 [第二届构建之法论坛] 预培训文档(Java版) 学习总结

    [第二届构建之法论坛] 预培训文档(Java版) 学习总结 我通读并学习了此文档,并且动手实践了一遍.以下是我学习过程的记录~ Part1.配置环境 配置JDK 原文中提到了2个容易被混淆的概念 JD ...

  10. Ubuntu 16.04下安装MySQL5.7

    原文链接:https://www.linuxidc.com/Linux/2017-06/144805.htm ps:ubuntu14.04下默认安装的是MySQL5.5 首先执行下面三条命令: sud ...