译自： CSS3 Image Styles 中文： CSS3图片样式 请尊重版权，转载请注明来源，多谢～～ 直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radius时，浏览器并不能完美的渲染它们。不过，如果把这个图片用作背景图，你就可以可以给它添加任何样式了，浏览器也会很好地渲染。 Darcy Clarke 和我做了一个简单的教程，

原文： The Difference Between :nth-child and :nth-of-type 译文： :nth-child 和 :nth-type-of 的区别 假设有以下 HTML 代码： section p Little / p p Piggy / p !--目标元素-- / section 以下代码得到的效果一样： p:nth-child(2){color:red;} p:nth-of-type(2){color:red;} 结果虽然相同，但是两者本身还是有所区

前阵子做了个css3文字效果，涉及css3投影，渐变，蒙版，伪类等知识点，现在写下设计思路，仅供参考。发个效果图大家看先： 投影shadow box-shadow 一般我们都是用css3的box-shadow来实现盒投影，用text-shadow来实现文字投影，box-shadow设置方型盒子投影，用raidus的话可以让盒子产生圆角，看起来就很圆滑舒服，一般的写法

通过使用:before和:after，你能创作出让人称奇的视觉效果。对页面中的每个元素，你都有两个额外的可以控制的元素，本来这些是需要额外的元素来实现。他们给设计带来了更多的趣味性的空间，而不是增加无语义的有负面影响的标签。这里给大家整理了一堆让人称奇的东西。让我们开始吧！ 给了你多层背景画布 因为你可以相对于他们

曾几何时,我们创建可以显示/隐藏一些内容的小组件时,我们不得不使用Javascript.有时候你可能不得不为这个小功能,下载一个完整的 JS 库才能达到这个功能效果.为下面的时刻欢呼吧!HTML5提供了创建这种拖拽特点的方法,我们仅仅需要简单的几行html代码就能获得这种效果(从目前而言,这种效果还依赖于使用的浏览器,当然,在不久的将

译自： Useful :nth-child Recipies 中文： 有用的:nth-child秘方 请尊重版权，转载请注明来源，多谢！ 当我想要完美的使用:nth-child或者:nth-of-type的时候有点儿头晕。你越理解它们，就能写出越好的CSS规则！ 在这些简单的秘方(实际上是表达式)中我将重复的使用一个简单的列表并随即选择数字。但是很明显很容易改变它们

首先先看一下基本定义： 复合选择器就是两个或多个基本选择器，通过不同方式连接而成的选择器，主要包括交集选择器、并集选择器、后代选择器。 交集选择器 交集复合选择器是由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。这两个选择器

你也许已经掌握了id、class、后台选择器这些基本的css选择器。但这远远不是css的全部。下面向大家系统的解析css中30个最常用的选择器，包括我们最头痛的浏览器兼容性问题。掌握了它们，才能真正领略css的巨大灵活性。 1. * { margin: 0; padding: 0; } 星状选择符会在页面上的每一个元素上起作用。web设计者经常用它将页面中