CSS3 Media Queries的介绍在本站上的介绍已有好几篇文章了，但自己碰到的问题与解决的文章还是相对的较少。前几天在《修复iPhone上submit按钮bug》上介绍了修复form中sumit按钮的bug。同一个项目，为了实现iPhone和iPad横板与竖板的风格，让我还是头疼了一翻。

一开始按照CSS3 Media Queries模板中的介绍来运用，虽然帮我解决了iPad的横板与竖板的风格渲染问题，但在iPhone4上还是存在问题的。后来结过网上的查找，总算是问题解决了，下面就来看看问题是如何解决的。

在具体开始之前，先来看看他的源码：

自从完成上次iPhone的几个页面效果后，一直在没有制作iPhone的页面效果了，今天在公司写了一个登录页面效果，让我碰到一个怪异的问题——“表单中的input[type="submit"]和input[type="reset"]按钮在iPhone的safari浏览器下圆角有一个bug”。下面我来简单的描述一下这个bug的样子：

初载入页面后，表单中的input[type="submit"]和input[type="reset"]按钮渲染成下图的样子：

奇怪的是你点击以后就会正常：

对比一下，你也会觉得怪，怪都算了，还不知道如何下手:

最早在《CSS3 Media Queries》一文中初探了CSS3的媒体类型和媒体特性的相关应用。简单的知道了使用这个能在各种不同的设备显示不一样的样式风格。随着Responsive的响应式设计的兴起，前面跟大家一起学习了：

iPhone上的UI的确是精致，让人爱不释手。今天用CSS3写了一个Checkbox的效果，采用了两种不同的方法来实现，另外在此基础上写了一个我们常用的checkbox的效果。

众所周知，想要美化表单中的元件，都少不了jQuery的帮忙，有关于这方面的介绍，本站也有过几篇相关的文章，比如说《美化表单——自定义单选按钮和复选按钮》、《自定义表单——JQuery制作个性化Checkbox》和《美化表单——自定义Checkbox和Radio样式》。那么有没有办法不使用jQuery呢？就是大家所说的纯CSS？如果你看了这篇文章后，你就会说，原来也可以实现呀。

前面在《OOCSS——核心篇》一文中有简单的提到Facebook的媒体对象（有的地方称作为“信息状态块”）的制作。那么今天老话重谈，主要使用不同的几种结构来制作这个媒体对象效果：

我们把上图拆分细化一下，可以划成下图的样子：

根据上图我们就可以轻松的写出需要的HTML结构。

HTML Markup:

今天主要想和大家一起探讨一下如何使用CSS3制作页面加载内容的动画效果。听起来可能有点晕晕的，我简单的说一下吧，这种效果就是浏览器加载你的页面时，给页面的内容赋予一个动画效果，让他不在那么生硬。最早看过这种效果是小志的Blog首页。今天特意看了一下志哥的写的代码，才知道实现起来并不是很困难的事情，不信大家一起来看看我扣出来的代码。

小志博客首页

别的我不多说，我直接使用firebug把志哥的Blog首页代码扒出来，下面我分为两部分：

HTML markup

最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果。今天终于抽出时间学习这个CSS3的Filter。不整不知道呀，一整才让我感到吃惊，太强大了。大家先来看个效果吧：

网页的字体的使用，大家都清楚，有时一些特殊字体只能使用图片来代替，因为担心用户的浏览器不具有这样的字体无法正常渲染页面的效果。为了解决这个问题，前面本站推出CSS3的@font-face来实现一些特殊字体的效果。效果是作出来了，但性能大家又说，加载文件太大，直接影响了网站的性能。说真的真是鱼和熊掌不能兼得呀，而且@font-face对于中文字体来说还是蛮麻烦的。那么是不是除了@font-face就别无他法了呢？不是的，现在Google Font Api也能实现。今天学习了一下觉得蛮实用的，也是相当的方便。整理了一下放上来与大家一起分享。

目标

目标很明确，需要使用下面的字体来渲染网页的字体效果：

CSS3的运用是越来越成熟了，在QQ群时常能看到朋友讨论这方面的技术，我也学习CSS3的相关技术也有一年之久了，收获也不少。在我的blog中也收集了不少这方面的教程。为了更方便的与大家分享，我今天特意将本站的有关于CSS3的运用罗列一下，并列出10个常用的相关属性，最后在以一个实例来与大家再次学习相关的CSS3的应用，希望大家能喜欢。

记得前段时间在《完美的页面背景图片制作》介绍了几种实现全屏背景图片的制作方法，其中第一种就是使用的CSS3的background-size来实现的。今天看了Mary Lou (Manoela Ilic)写的一篇有关于全屏背景图像的幻灯片效果的教程《Fullscreen Background Image Slideshow with CSS3》，觉得特有意思，同时勾起了我动手的冲动。