CSS Sprites + 圆角[译]
作者:板凳 来源:译言 发布时间:2009-05-08 16:10:00
初步介绍
当然,我知道现在有成千上万个关于 用CSS处理圆角 的教程,但不管怎么说,我仍然想把这篇文章展示给您。也希望您会发现这篇文章会非常有用。需要重点指出的是,这篇教程彻底地应用高级CSS技术,但是,我会尽力使初学者看起来简单。CSS3 在这里还没有得到完全的应用,所以,知道现在,我会保持W3C验证的有效。
本地下载:demo-rounded-corners.zip (10.01 KB)
您还可以参考一下文章:
43个PSD转XHTML, CSS创建布局及导航辅导教程,解析事件背后的每一个步骤
我们将怎样来处理?
我处理圆角的版本是由内置的绝对定位的四个div组成,每个div都有唯一的圆角图片作CSS Sprite操作。我们将会这样做:
是什么方式导致这项技术表现得这么了不起呢(What makes this technique cool)?
通过可变的宽度和高度处理毗邻的元素的能力。没有极限。(The ability to make rounded-bordered elements with fluid width and height. No limits whatsoever.) 这项技术,正如我之前提到的,是与 CSS Sprites 结合操作完成的。如果您不知道这是项怎样的技术或者说不知道怎么使用它,那么请先阅读我 之前的文章。CSS sprites 都学会了吗? 那我们就开始吧!
第一步: 创建我们的 Sprite
1、为矩形圆角图片处理选择一款编辑器 (在这个案例中我选择的是Firework).
2、切割并且导出圆角到本地临时位置 (我们将会在之后用到).
3、新创建一个文件,将圆角导入到这个新文件中,复制三次,然后旋转这三个新切片得到另外的三个圆角。
4、合成四个圆角为一张图片, 并用 1px 的红线 来区分它们.
5、导出合成图片,sprite 也就大功告成了。
猜你喜欢
- Vue.js 使用v-cloak后仍显示变量的解决方法v-cloak 这个指令是防止页面加载时出现 vuejs 的变
- 前言PyEMD是经验模态分解 (EMD)及其变体的Python实现,EMD最流行的扩展之一是集成经验模态分解 (EEMD),它利用了噪声辅助
- 如何在ADO服务器端利用好缓存技术?请看下面示例,这是一个用来显示图书分类的例子程序:displayBooks.asp< %
- 上一篇博客介绍了 如何使用Python,OpenCV上下左右(或任意组合)平移图像。这篇博客将介绍如何使用OpenCV旋转图像任意角度。并演
- 本文实例讲述了python threading和multiprocessing模块基本用法。分享给大家供大家参考,具体如下:前言这两天为了做
- 前言适用于python2和python31. loads方法与load方法的异同在Python中json是一个非常常用的模块,这个主要有4个
- os/exec包可用于调用外部命令,可以使用管道连接输入输出,并支持阻塞与非阻塞方式执行命令。os/exec包中关键的类型为Cmd,以下介绍
- 上一篇实战爬取知乎热门话题的实战,并且保存为本地的txt文本先上代码,有很多细节和坑需要规避,弄了两个半小时import requestsi
- 如下所示:import numpy as npimport pandas as pdfrom pandas import Series,Da
- Python的3.0版本,常被称为Python 3000,或简称Py3k。相对于Python的早期版本,这是一个较大的升级。为了不带入过多的
- 作者: wyh草样出处:https://www.cnblogs.com/wyh0923/p/14047466.html1、数据库配置类 Mo
- 一 介绍Python上有一个非常著名的HTTP库——requests,相信大家都听说过,用过的人都说非常爽!现在requests库的作者又发
- 组合集总计: group by with rollup/cube grouping sets 子查询按执行方式分:标准子查询、关联子查询 标
- 创建变量变量是存放数据值的容器。与其他编程语言不同,Python 没有声明变量的命令。首次为其赋值时,才会创建变量。实例x = 10y =
- 不过,如果您需要查找文档中的一个特定的元素,最有效的方法是 getElementById()。 不过要注意的是使用getElementByI
- 如何在Typescript中使用for...in ?本人在TS中用for...in出现了些问题,也想到了一些解决方法。那么先来看看下面报错的
- (1)使用python生成pdf文档需要的最基本的包是pdfgen。它属于reportlab模块,而reportlab模块并没有默认集成到p
- 在我们编程过程中,经常会用到与时间相关的各种务需求,下面来介绍 golang 中有关时间的一些基本用法,我们从 time 的几种 type
- Python中的中文是个很头痛的问题,Python2和Python3都会出现,而且py2中出现的概率要大些。 有一道面试题: Py
- python 3.3 下载固定链接文件并保存。import urllib.requestprint ("downloading w