<!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. Coursera, Deep Learning 1, Neural Networks and Deep Learning - week2, Neural Networks Basics

    Logistic regression Cost function for logistic regression Gradient Descent 接下来主要讲 Vectorization Logi ...

  2. 使用MiniProfiler检测页面性能

    1.引入nuget包 PM> Install-Package MiniProfiler 2.配置界面 @using StackExchange.Profiling; <head> . ...

  3. Leetcode#561. Array Partition I（数组拆分 I）

    题目描述 给定长度为 2n 的数组, 你的任务是将这些数分成 n 对, 例如 (a1, b1), (a2, b2), ..., (an, bn) ,使得从1 到 n 的 min(ai, bi) 总和最 ...

  4. 剑指Offer题解索引

    数组 数组中重复的数字 二维数组中的查找 构建乘积数组 字符串 替换空格 字符流中第一个不重复的字符 表示数值的字符串 递归和循环 斐波那契数列 跳台阶 变态跳台阶 矩形覆盖 链表 从尾到头打印链表 ...

  5. mysql 查询优化 ~ 优化基础补充

    一 简介:此文章是对于 sql通用基础的补充说明 二 虚拟列: mysql虚拟列是mysql5.7的新特性,对于函数计算形成的结果可作为虚拟列,并可以对虚拟列添加索引,这样就能加速sql的运行,不过有 ...

  6. mysql 查询优化 ~ 多表查询基础知识

    一 什么是驱动表   1)指定了联接条件时,满足查询条件的记录行数少的表为[驱动表]:   2)未指定联接条件时,行数少的表为[驱动表](Important!).   表现 explain第一行出现的 ...

  7. oracle坏块问题的处理

    一.背景 今天有用户反映数据库连不上了,查看日志发现有数据库坏块. 查看数据库日志,有如下报错: ORA-01578: ORACLE , 93642) ORA-01110: 1: '/oracle/a ...

  8. 【OpenGL】【计算机图形学原理】撸课本系列一

    P13 简单二维图元的生成方法 #include <GL/glut.h> //用于表示openGL允许采用 glClear(GL_COLOR_BUFFER_BIT); //清除颜色缓存 g ...

  9. Linux后门权限维持手法

    0x01 Linux 1. 预加载型动态链接库后门 inux操作系统的动态链接库在加载过程中,动态链接器会先读取LD_PRELOAD环境变量和默认配置文件/etc/ld.so.preload,并将读取 ...

  10. 【转】MySQL用户管理及SQL语句详解

    [转]MySQL用户管理及SQL语句详解 1.1 MySQL用户管理 1.1.1 用户的定义 用户名+主机域 mysql> select user,host,password from mysq ...