<!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. 简单而兼容性好的Web自适应高度布局,纯CSS

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

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

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

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

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

  7. 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案

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

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

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

  9. 纯CSS打造银色MacBook Air(完整版)

    上一篇:<selection伪元素小解> ::selection{ background:blue; color:red; }p{font-size:14px;} 作者主页:myvin 博 ...

随机推荐

  1. Mongodb解决不能连接到服务器的错误

    注:这次解决的这个问题的前提是之前打开MongoDB之后,再次使用的时候无法连接了(使用mongod和mongo都不对) 闲话:遇到这种问题真是让人恼火,所以说句sun of beach,好了~爽 正 ...

  2. How to steal any developer&#39;s local database

    原文链接: http://bouk.co/blog/hacking-developers/ If you’re reading this and you’re a software developer ...

  3. KeilC51使用详解 (一)

    第一节 系统概述 Keil C51是美国Keil Software公司出品的51系列兼容单片机C语言软件开发系统,与汇编相比,C语言在功能上.结构性.可读性.可维护性上有明显的优势,因而易学易用.用过 ...

  4. curl+个人证书(又叫客户端证书)访问https站点

    摘自http://blog.csdn.net/chary8088/article/details/22990741 curl+个人证书(又叫客户端证书)访问https站点 目前,大公司的OA管理系统( ...

  5. Properties类对于文件的读取和写入

    Properties类表示一个持久的属性集.Properties可保存在流中或从流中加载.Properties对象只能加载以 .Properties 为后缀的文件(文件我创建在src下). 开始时文件 ...

  6. [LeetCode] Domino and Tromino Tiling 多米诺和三格骨牌

    We have two types of tiles: a 2x1 domino shape, and an "L" tromino shape. These shapes may ...

  7. Jmeter之正则表达式提取器应用

    说到Jmeter正则表达式提取器的应用,就不得不说到关联.所谓关联,就是把应用中动态变化返回的数据获取到,把它保存为一个参数,提供给后面需要用到的地方进行使用. Jmeter中关联是通过“添加—后置处 ...

  8. windows 10下sublime text3环境的搭建以及配置python开发环境

    1 - 安装Sublime Text 3 到官网下载对应的版本,如下: OS X (10.7 or later is required) Windows - also available as a p ...

  9. mysql 查询优化 ~explain解读之select_type的解读

    一 简介:今天咱们来聊聊explain的select_type 二 类型 (1)SIMPLE 简单的SELECT语句(不包括UNION操作或子查询操作) (2)PRIMARY/UNION PRIMAR ...

  10. 【Redis】使用Jedis操作Redis

    Jedis介绍 jedis就是集成了redis的一些命令操作,封装了redis的java客户端. Jedis使用 使用jedis需要引入jedis的jar包,下面提供了maven依赖 jedis.ja ...