<!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. Git学习之连接GitHub远程仓库

    在看此教程之前电脑上应该已安装好git,并且配置好基本信息,Git新手请从头开始. 第1步:创建SSH Key 在用户主目录下(Mac系统是在用户主目录下,可通过命令ll -a查看,Windows下自 ...

  2. call apply bind 区别？

    call apply bind 区别? 例:定义一个计算器,没绑定bind的为公共计算器,call可以调用,绑定bind的为私人计算器,别人调用不了, //ps:用bind绑定的call强制作借用不好 ...

  3. bae64编码

    data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJb ...

  4. 【数据表格】datatable+SpringMVC+Spring Data JPA

    初步实现 $("#userTable").dataTable({ "processing": true, "serverSide": tru ...

  5. .net+mvc，ueditor

    .net+mvc的百度编辑器ueditor 一.下载百度编辑器:http://ueditor.baidu.com/website/download.html 选择.net版本 二.解压后在mvc项目中 ...

  6. mysql案例~mysql主从复制延迟概总

    浅谈mysql主从复制延迟 1 概念解读 需要知道以下几点 1 mysql的主从同步上是异步复制,从库是串行化执行 2 mysql 5.7的并行复制能加速从库重做的速度,进一步缓解 主从同步的延迟问题 ...

  7. java实现在线浏览PDF文档功能

    实现在线浏览pdf文档功能(本代码适用于项目服务中固定的并且少量的pdf浏览,比如注册时的注册条款在线浏览等): //设置响应内容类型为PDF类型 response.setContentType(&q ...

  8. map中的count方法

    map.count(Key)返回值为1或者0,1返回存在,0返回不存在,返回的是布尔类型的值,因为在map类型中所有的数据的Key值都是不同的,所以被count的数要么存在1次,要么不存在

  9. openstack Q版部署-----nova服务配置-计算节点（6）

    一.服务安装(计算节点) 安装软件: yum install openstack-nova-compute -y 编辑/etc/nova/nova.conf文件并设置如下内容: [DEFAULT] e ...

  10. 【VMware vSphere】vSphere Data Protection简介

    [前言] 还记得一月份左右的时候,万达这边的服务器突然宕机,导致所有的项目不得不停止不说,还损失掉了很多宝贵的数据.为了防止这种情况再次发生,所以近期研究了vSphere Data Protectio ...