所需图片：

　　                                                                                       

　　corners-type1     corners-type2    corners-type3   corners-type4     corners-type5    roundedbox-type5-bg

<!doctype html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Previe of Type  - Easy rounded corners, by Ignacio Ricci (www.ignacioricci.com)</title>

<style>

body {margin:; padding:40px; font:% Georgia, "Times New Roman", Times, serif; background:#FFF;}

/* Rounded-cornered divs -*/

.roundedBox {position:relative; padding:17px; margin:10px ;}

/*- All the corners -*/

.corner {position:absolute; width:17px; height:17px;}

/*- Each corner -*/

.topLeft {top:; left:; background-position:-1px -1px;}

.topRight {top:; right:; background-position:-19px -1px;}

.bottomLeft {bottom:; left:; background-position:-1px -19px;}

.bottomRight {bottom:; right:; background-position:-19px -19px;}

/*- Type1 - Blue -*/

#type1 {background-color:#CCDEDE;}

#type1 .corner {background-image:url(img/corners-type1.gif);}

/*- Type2 - Green -*/

#type2 {background-color:#CDDFCA;}

#type2 .corner {background-image:url(img/corners-type2.gif);}

/*- Type3 - Violet -*/

#type3 {background-color:#D3CADF;}

#type3 .corner {background-image:url(img/corners-type3.gif);}

/*- Type4 - Red with border -*/

/* We change the corners' position and add the border */

#type4 {background-color:#CCACAE; border:1px solid #AD9396;}

#type4 .corner {background-image:url(img/corners-type4.gif);}

#type4 .topLeft {top:-1px; left:-1px;}

#type4 .topRight {top:-1px; right:-1px;}

#type4 .bottomLeft {bottom:-1px; left:-1px;}

#type4 .bottomRight {bottom:-1px; right:-1px;}

/*- Type5 - With gradient -*/

/* We change the top corners' height, and the bottom corners background-position. We must also add to the containing div a gradient to repeat in x. */

#type5 {background:#FECBCA url(img/roundedbox-type5-bg.png) repeat-x  ; min-height:110px;}

#type5 .corner {background-image:url(img/corners-type5.png);}

#type5 .topLeft,

#type5 .topRight {height:140px;}

#type5 .bottomLeft {background-position:-1px -142px;}

#type5 .bottomRight {background-position:-19px -142px;}

</style>

</head>

<body>

        <!-- Type1: Blue -->

    <div class="roundedBox" id="type1">

        <strong>My content in roundedBox Type </strong>

        <div class="corner topLeft"></div><div class="corner topRight"></div><div class="corner bottomLeft"></div><div class="corner bottomRight"></div>

    </div>

<!-- Type2: Green -->

    <div class="roundedBox" id="type2">

        <strong>My content in roundedBox Type </strong>

        <div class="corner topLeft"></div><div class="corner topRight"></div><div class="corner bottomLeft"></div><div class="corner bottomRight"></div>

    </div>

<!-- Type3: Violet -->

     <div class="roundedBox" id="type3">

        <strong>My content in roundedBox Type </strong>

        <div class="corner topLeft"></div><div class="corner topRight"></div><div class="corner bottomLeft"></div><div class="corner bottomRight"></div>

    </div>

<!-- Type4: Red with border -->

     <div class="roundedBox" id="type4">

        <strong>My content in roundedBox Type </strong>

        <div class="corner topLeft"></div><div class="corner topRight"></div><div class="corner bottomLeft"></div><div class="corner bottomRight"></div>

    </div>

<!-- Type5: With gradient -->

     <div class="roundedBox" id="type5">

        <strong>My content in roundedBox Type </strong>

        <div class="corner topLeft"></div><div class="corner topRight"></div><div class="corner bottomLeft"></div><div class="corner bottomRight"></div>

    </div>

</body>

</html>

CSS sprite 圆角——源代码的更多相关文章

  1. css sprite，css雪碧图生成工具V3.0更新

    V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS spr ...

  2. css sprite 调整大张图片中小图标的大小

    直接说解决方法: 假设一张拼合好的大图大小是:900 x 1000 px (如上图) 现在想取图中左上角的河马图标,并缩小图标的大小. 正常取图: .sprite { background: url( ...

  3. HTML CSS SPRITE 工具

    推荐一个CSS SPRITE工具 网盘分享:http://pan.baidu.com/s/1sjx7cZV

  4. CSS Sprite雪碧图应用

    在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...

  5. CSS雪碧，即CSS Sprite 简单的例子

    CSS Sprite生成工具 http://pan.baidu.com/s/1gdGQwiJ 工具可将多幅图片整合一张,并生成CSS. HTML代码 <style> .img{backgr ...

  6. 使用compass自动合并css雪碧图(css sprite)

    本文转载自: 使用compass自动合并css雪碧图(css sprite)

  7. CSS Sprite 图标

    HTML <body> <!-- ul.sprite>li*5>s.s-icon+a{CSS Sprite} --> <!-- 以上是Sublime Text ...

  8. CSS Sprite 雪碧图制作

    CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需 ...

  9. CSS Sprite的优缺点分析

    目前大多数的开发人员对这个技术都有相当地掌握,也有很多关于它的教程和文章.几乎所有的文章中都宣称设计师和开发人员都应该使用 CSS sprite 来减少 HTTP 请求数,并且节省一些流量.这个技术被 ...

随机推荐

  1. php + mysql + sphinx 的全文检索(2)

    简单 使用php api 去查询 sphinx 的索引数据 $sphinx = new SphinxClient();                 $sphinx->SetServer (  ...

  2. 【BZOJ 1189】[HNOI2007]紧急疏散evacuate

    Description 发生了火警,所有人员需要紧急疏散!假设每个房间是一个N M的矩形区域.每个格子如果是'.',那么表示这是一块空地:如果是'X',那么表示这是一面墙,如果是'D',那么表示这是一 ...

  3. 洛谷 P1858 多人背包

    求01背包前k优解的价值和 输入输出格式 Input/output 输入格式:第一行三个数K.V.N(k<=50,v<=5000,n<=200)接下来每行两个数,表示体积和价值输出格 ...

  4. MyBatis对不同数据库的主键生成策略

    本文转自:http://289972458.iteye.com/blog/1001851  http://hi.baidu.com/zim_it/blog/item/8a2bd11205f5b56ec ...

  5. python学习笔记19（序列的方法）

    序列包含有宝值 表(tuple)和表(list).此外,字符串(string)是一种特殊的定值表,表的元素可以更改,定值表一旦建立,其元素不可更改. 任何的序列都可以引用其中的元素(item). 下面 ...

  6. TWaver初学实战——如何在TWaver属性表中添加日历控件？

    在日期输入框中添加日历控件,是一种非常流行和实用的做法.临渊羡鱼不如退而写代码,今天就看看在TWaver中是如何实现的.   资源准备   TWaver的在线使用文档中,就有TWaver Proper ...

  7. bnuoj 29373 Key Logger（模拟双向队列）

    http://www.bnuoj.com/bnuoj/problem_show.php?pid=29373 [题意]:模拟光标输入 [题解]:用双向列表模拟实现,这里用其他模拟会超时,注意内存的释放 ...

  8. NodeJS用递归实现异步操作的链式调用，完成一个简易的命令行输入输出REPL交互接口

    REPL —— Read-Eval-Print-Loop. 00.一门好的编程语言的必要条件 REPL并不是什么高大上的东西,简单的说就是一个从命令行程序,读取终端输入,处理,打印结果,如此循环.这是 ...

  9. Eat the Trees hdu 1693

    Problem DescriptionMost of us know that in the game called DotA(Defense of the Ancient), Pudge is a ...

  10. c/c++强制类型转换

    转自c/c++强制类型转换 Q:什么是C风格转换?什么是static_cast, dynamic_cast 以及 reinterpret_cast?区别是什么?为什么要注意? A:转换的含义是通过改变 ...