Badst' weblog

记得刚接触电脑那会儿，就对windows的设置桌面背景特别感兴趣。 设置背景有3个选项：居中，平铺，拉伸。 居中就相当与css中background的：center no-repat 平铺是background的默认设置。 而拉伸这个功能终于在CSS3中千呼万唤始出来。 语法：background-size ：[ <length> | <percentage> | auto ]{1,2} | cover | contain 说明：设置背景图片大小，指定背景图片大小或百分比显示。 实例：以下这张图片，原图大小：256px * 256px CSS: color:black; height: 350px; width: 350px; padding: 20px; border: 10px dotted #111; background: #80B3FF url(‘http://badst.org/wp-content/uploads/2012/01/256.jpg’) center no-repeat; background-size: 100%; text-shadow: 0 -1px 1px #fff; 这里是效果图，可以看到背景图片被拉伸到这个div的高度和宽度。 参考资料：http://www.zhangxinxu.com/css3/css3-background-size.php 相关属性：background-clip | background-origin

字体使用是网页设计中不可或缺的一部分。经常地，我们希望在网页中使用某一特定字体，但是该字体并非主流操作系统的内置字体，这样用户在浏览页面的 时候就有可能看不到真实的设计。美工设计师最常做的办法是把想要的文字做成图片，这样做有几个明显缺陷：1. 不可能大范围的使用该字体；2. 图片内容相对使用文字不易修改；3. 不利于网站SEO（主流搜索引擎不会将图片alt内容作为判断网页内容相关性的有效因素）。网络上有一些使用sIFR技术、或 javascript/flash hack的方法，但实现起来或繁琐，或有缺陷。下面要讲的是如何只通过CSS的@font-face属性来实现在网页中嵌入任意字体。 第一步 获取要使用字体的三种文件格式，确保能在主流浏览器中都能正常显示该字体。 .TTF，True Type Font 适用于Firefox 3.5、Safari、Opera OTF，Open Type Font 适用于Firefox 3.5、Safari、Opera .EOT，适用于Internet Explorer 4.0+ .SVG，适用于Chrome、IPhone .WOFF，适用于Firefox 3.6 +，支持Mozilla的text-rendering属性 下面要解决的是如何获取到某种字体的这三种格式文件。一般地，我们在手头上（或在设计资源站点已经找到）有该字体的某种格式文件，最常见的 是.TTF文件，我们需要通过这种文件格式转换为其余两种文件格式。字体文件格式的转换可以通过网站Font2Web，FontsQuirrel或onlinefontconverter提供的在线字体转换服务获取。这里推荐第一个站点，它允许我们选择需要的字符生成字体文件（在服务的最后一个选 项），这样就大大缩减了字体文件的大小，使得本方案更具实用性。选择一个字体文件后自动给你生成一个包含5种格式字体，一个demo.html演示，和一个字体声明文件的font.css，速度很快。

今天更新了IE9，意外的发现IE9居然都还不支持text-shadow的样式，然后就想用这个网站查查，又意外的发现用IE9和Chrome的显示情况是不一样的，原来是根据你的浏览器变化的。

这个是IE9的，一片红叉叉。

Go this URL http://fmbip.com/

CSS3中新增的3个边框效果，圆角边框，边框阴影，边框图片。 border-radius box-shadow border-image 浏览器支持情况： 前两个效果所有浏览器均以统一标准支持，border-image针对不同浏览器需增加专有代码： Firefox: -moz- Opera: -o- Safari/Chrom: -webkit- 目前最新的IE9不支持border-image   border-radius border-radius:25px; 其中的px可以改为%（整体box长宽的百分比）或em（内容字体大小的倍数比例） 如果为100%那就是一个整圆了。 定义四个角不同的值可以写成 border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius 简化写法，与margin同理，从topleft开始顺时针旋转。 border-radius:上左 上右 下左 下右 border-radius:上左下右 上右下左 border-radius:上左 上右下左 下右   box-shadow box-shadow: x偏移 y偏移 阴影扩散半径 阴影颜色 不可使用%单位，可使用px,pt,em 如阴影扩散半径省略则默认为0，——> CSS3属性Box-shadow   border-image border-image:url() 缩放x 缩放y round/stretch round:平铺 stretch:拉伸 确实不好解释，看w3school的演示吧。 这个很不好用，必须定义border-width，但这样又拉宽了整个盒子的大小。 但确实激发了不少创作的可能。 参考：http://www.w3schools.com/css3/css3_borders.asp

一个强大的例子：

text-shadow是什么? text-shadow早在CSS2中已经存在,而现在CSS3也准备将他加入其中.并且由于一直以来只有Safari支持这个属性所以我们很少见到真正的应用,直到最近Firefox 3.5对它的支持然重新唤起了人们对它的兴趣. text-shadow可以支持给文字加上阴影,这样我们在设计时可以利用css3属性增加文字的质感而不用使用任何图片. 目前支持的浏览器有Firefox 3.1+,Safari 3+,Opera 9.5+等现代浏览器(数据可能有偏差).当然IE家族是无法支持的. 接下来看看text-shadow的语法: text-shadow: length-X length-Y length-R color; color:颜色; length分别按顺序指”X轴方向长度 Y轴方向长度 阴影模糊半径” 正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上. 其中任意一个值可以为零也可为空(将做默认处理) 举个例子: text-shadow: -1px 2px 3px #ffb69a; 表示X轴方向阴影向左1px,Y轴方向阴影向下2px,而阴影模糊半径3px,颜色为 #ffb69a 一些试验与demo 我做了点小小的试验,做成了一个Demo页面.

http://www.w3schools.com/cssref/default.asp 包含各属性的介绍和演示 http://www.findmebyip.com/litmus CSS3.0在各个浏览器中的支持情况 http://www.css3.info/ http://www.css3-html5.com/