CSS sprite 圆角——源代码

所需图片：

　　 CSS sprite 圆角——源代码

　　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 圆角——源代码的更多相关文章

css sprite，css雪碧图生成工具V3&period;0更新
V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能什么是css sprite CSS spr ...
css sprite 调整大张图片中小图标的大小
直接说解决方法: 假设一张拼合好的大图大小是:900 x 1000 px (如上图) 现在想取图中左上角的河马图标,并缩小图标的大小. 正常取图: .sprite { background: url( ...
HTML CSS SPRITE 工具
推荐一个CSS SPRITE工具网盘分享:http://pan.baidu.com/s/1sjx7cZV
CSS Sprite雪碧图应用
在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...
CSS雪碧，即CSS Sprite 简单的例子
CSS Sprite生成工具 http://pan.baidu.com/s/1gdGQwiJ 工具可将多幅图片整合一张,并生成CSS. HTML代码 <style> .img{backgr ...
使用compass自动合并css雪碧图(css sprite)
本文转载自: 使用compass自动合并css雪碧图(css sprite)
CSS Sprite 图标
HTML <body>  <!-- 以上是Sublime Text ...
CSS Sprite 雪碧图制作
CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需 ...
CSS Sprite的优缺点分析
目前大多数的开发人员对这个技术都有相当地掌握,也有很多关于它的教程和文章.几乎所有的文章中都宣称设计师和开发人员都应该使用 CSS sprite 来减少 HTTP 请求数,并且节省一些流量.这个技术被 ...

随机推荐

fedora上部署ASP&period;NET——（卡带式电脑跑&period;NET WEB服务器）
andrew,20130601,guilin 本文记录在树莓派(fedora)上部署ASP.NET MVC2 的过程. 本文共分为六部分,分别是前置条件,Apache的安装,Mysql的安装,安装mo ...
Windows - 性能监控之磁盘剩余空间大小警报
开始 -> 运行 -> 键入命令 perfmon.msc 数据收集器(Data Collector Sets) -> 用户自定义(User Defined)
Excel 导入导出 Microsoft
导出: private void exportExcel() { if (saveFileDialog1.ShowDialog() == DialogResult.OK) { Application. ...
第七章 LED将为我们闪烁：控制发光二极管
第七章 LED将为我们闪烁:控制发光二极管本章我们将会看到一个完整的linux驱动程序,通过linux驱动程序控制LED的四个小灯,通俗的说就是通过向linux驱动程序来控制LED小灯的开关.用到 ...
python任务执行之线程，进程，与协程
一.线程线程为程序中执行任务的最小单元,由Threading模块提供了相关操作,线程适合于IO操作密集的情况下使用 #!/usr/bin/env python # -*- coding:utf-8 ...
Centos下编译JDK
因为OpenJDK是开源的,这里使用openJDK进行编译联系环境要求 Centos6.7 64位 openjdk-7u40-fcs-src-b43-26_aug_2013.zip bootstra ...
为什么要尽量少使用iframe
Iframes 阻塞页面加载及时触发 window 的 onload 事件是非常重要的.onload 事件触发使浏览器的 “忙” 指示器停止,告诉用户当前网页已经加载完毕.当 onload 事件加载 ...
Windows版 mysql 5&period;7&period;16安装
MySQL 5.7版本安装教程-踩坑总结下载 MySQL下载地址选择下载64位(看自己电脑是32位还是64位) 点击下载之后,它会让你登录,没有Oracle账户,跟着它的步骤注册一个就好了. 安装 ...
Python 跳出多重循环
Python 本身没有“break n” 和“goto” 的语法,这也造成了Python 难以跳出多层(特定层数)循环.下面是几个跳出多层(特定层数)循环的tip. 1.自定义异常 class g ...
android执行外部命令、检测文件是否存在、自动检测U盘路径
private final String UDiskFileName = "/2969_logo/bootfile.image"; private final String Loc ...