这是在css3 UI规范中新增的一个功能，用来控制内容的可选择性。

用法：

1

user-select:value;

值：

• auto——默认值，用户可以选中元素中的内容
• none——用户不能选择元素中的任何内容
• text——用户可以选择元素中的文本
• element——文本可选，但仅限元素的边界内(只有IE和FF支持)
• all——在编辑器内，如果双击/上下文点击发生在子元素上，改值的最高级祖先元素将被选中。
• -moz-none——firefox私有，元素和子元素的文本将不可选，但是，子元素可以通过text重设回可选。

实例——用鼠标拖动或双击下面的文字试下：

浏览器支持

目前，只有Gecko和webkit支持该属性，包括基本上所有版本的Firefox/Chrome/Safari，IE10中也将支持该属性。当然，各个浏览器都必须加上私有前缀。Opera尚不支持。

结语

这个属性，在之前是被用来保护网站的内容，不被用户复制和转载，从而保护资讯的版权，但是这样却对普通用户的用户体验造成了伤害，而且，并不能真正的保护页面中的内容，这对前端开发人员来说，很容易搞定的吧？ …XD

现在，HTML5蒸蒸日上，很多网站或者web app会使用到Drag and Drop技术，user-select正好在一些情境中可以用到。

当然，技术是为人服务的，怎么用都可以，但是，伤害用户体验的产品，最终是得不到用户的吧。。。

这些滤镜效果最初是用于SVG的，W3C引入到CSS中，然后制定了CSS Filter Effects 1.0，现在webkit率先支持了它。

现在规范中支持的效果有：

• grayscale 灰度
• sepia 褐色
• saturate 饱和度
• hue-rotate 色相旋转
• invert 反色
• opacity 透明度
• brightness 亮度
• contrast 对比度
• blur 模糊
• drop-shadow 阴影

嗯，有些和CSS3重复了，不过，具体要怎么用还要看具体情况，至少我们可以用不同的方法实现同样的效果——比如透明度。

用法是标准的CSS写法：

-webkit-filter: blur(2px);

然后，Eric Bidelman写了一个demo，可以很方便的查看各种效果。但是考虑到某网站因为不明原因在国内无法访问，我将该demo页面简单的翻译了下，放到这边给大家预览，请猛击查看。

请注意，改滤镜目前只有最新的webkit nightly版本和Chrome 18.0.976以上版本才支持，所以你需要下载一个最新的版本来体验～～我用的是webkit nightly。

现在，让我们看一下一些简单的效果吧：

原图

模糊

50%灰度

100%灰度

50%褐色

100%褐色

50%亮度

100%亮度

色相

反色

饱和度

对比度

嗯，我们在手机端的各种特效如lomo、日系等，也可以在页面简单实现一些了，配合css3内阴影、遮罩、渐变等，相信不必instagram等差多少。

ps:sepia的翻译貌似有点儿问题，求专业指点。

• 项目主页：http://daneden.me/animate/
• 自定义下载样式：http://daneden.me/animate/build/
• git地址：https://github.com/daneden/animate.css

上周写了个简单的ppt在组内大概介绍了下，感兴趣的话可以先看下这个PPT。

移动互联网的现状和未来

在说到这个话题前，我们先看下网页设计和前端开发的现状：

1. 全球有超过53亿手机用户（包括传统手机）
2. 国内3G用户超过1亿
3. iPhone4手机在2010年出货量超过3000万部；
4. iPhone 4S上市前3天卖掉400万部；
5. Android手机每天激活超过50万部；
6. iPad出货量已经超过2.5亿部；
7. 预计到2015年，移动互联网的数据流量将超越桌面端的流量。
8. 。。。

嗯，大家也许已经开始注意到，自己和身边的朋友也都越来越多的用上了iPhone或者android手机或平板——一两年前我们预料的移动互联网时代即将来临，现在已然实现了——我们正处在移动互联网快速发展的时代——已经不再是起步阶段了。

那么，什么是响应式网页设计？

响应式网页设计是Ethan Marcotte在去年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念可以说是是为移动互联网而生的！

或许大家之前会注意到，有很多知名网站都推出了iPhone或针对智能手机的专门网站，比如3g.qq.com、m.taobao.com、ipad.xxx.com等等。。。甚至前端观察之前也尝试过用wordpress插件实现m.qianduan.net的移动网站。

那么问题就来了——我们要为每一个设备做一个单独的网站吗？来让网站在每个设备中得到相应的视觉风格和操作体验？

这样势必就要增加很多的工作量，而且很多还是重复的。

我们在做页面的时候，一般很强调模块化的概念，我们要求一个合格的模块要能够“可扩展、无侵染”，它要能够用在任何地方都能够正常的显示。响应式网页设计与此类似——网站在任何设备中都能够正常适配，而不用为每个设备单独做个子网站！

但是，产品经理和设计师可能还是会要求网站在各个浏览器里面表现要一模一样，甚至要像素还原——WTF！不同的浏览器本身的功能、行为和处理方式都不一样，为什么要表现完全一样？！

let the browser flow…

怎么做？

其实响应式网页的实现很简单，都是大家熟悉的技术。

media query(媒体查询)

因为现在主流的智能终端都是基于iOS和Android的，而它们自带的浏览器都是基于webkit内核，所以我们可以完全使用viewport属性和media query技术实现网站的响应性：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

后面的initial-scale表示初始缩放，maximum-scale表示最大缩放比例，1意味着不能进行缩放。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/* for 240 px width screen */
@media only screen and (max-device-width:240px){
    selector{
    }
}
 
/* for 360px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:360px){
    selector{
    }
}
 
/* for 480 px width screen */
@media only screen (min-device-width:361px)and (max-device-width:480px){
    selector{
    }
}

当然依靠屏幕宽度来进行适配是最简单的方法，media query有很多参数可以使用比如orientation、aspect-ratio等，不太了解的可以查看这篇详细的介绍。

其实，media query是响应式网页设计中被用到最多的技术。

fluid grid(流体网格)

很多项目都在使用网格技术(或者叫栅格)，前几年960.gs很流行，但是随着屏幕分辨率的普遍提升，它已经不太适合当前需求了，于是最近几年fluid grid开始逐渐多了起来，这种技术其实也很简单，只是将格栅的单位由px变成%，用百分比来控制页面每列的宽度，从而实现宽度的自适应。

使用流体网格的网站能够根据屏幕宽度自动调整页面中每列的宽度，从而保证页面的完整展现和基本功能。这也是一种不错的方法。

flex box

flex box是css3中的新技术，它很强大，可以实现很多我们之前无法想象的自适应布局。

有时我们希望网站能够以webapp的外观呈现给手机用户，flexbox是个不二的选择。

比如，要实现这样的简单结构：

它很像一个app的结构，头部和底部固定，中间高度自适应，用flexbox可以简单实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

.flex_wrap{
	height:100%;
	display: box;  
	display: -moz-box;  
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	box-orient: vertical;
}
.flex_bd{
	box-flex: 1;
	-moz-box-flex: 1; 
	-webkit-box-flex:1;
	background:#E7E7E7;
	overflow-y:auto;
}
.flex_hd{
	background:#16364C;
	height:30px;
	line-height:30px;
	text-align:center;
	color:#FFF;
	font-weight:700;
	font-family:14px;
}
.flex_ft{
	background:green;
	height:30px;
	line-height:30px;
	text-align:right;
}

HTML代码：

1
2
3
4
5
6
7
8
9
10
11
12

<div class="flex_wrap">
	<div class="flex_hd">前端观察</div>
	<div class="flex_bd">
		<p>这里是主内容区</p>
		<p>这里是主内容区</p>
	</div>
	<div class="flex_ft">
		<a href="http://www.qianduan.net/about" title="关于我们">关于我们</a>
		<a href="http://www.qianduan.net/copyright" title="版权声明">版权声明</a>
		<a href="http://www.qianduan.net/sitemap" title="网站地图">网站地图</a>
	</div>
</div>

虽然这里还会有点儿问题，比如主内容区域内容太多会被隐藏掉，因为android webkit和iOS 5之前的mobile safari均不支持overflow:scroll属性，但是这个问题还是很好解决的，比如在里面嵌套一个子容器，用js来给定个高度并使用定位来实现滚动条从而完整展示内容，或者直接使用iscroll等js库来实现。好消息是，iOS5中safari开始支持overflow:scroll了。

不足之处

如果你关注网站性能之类的话，可能已经发现了一些问题：

• 加载很多不需要的资源，比如多余的图片和样式内容
• 带宽限制
• 移动终端的内存和CPU限制
• 图片大小和屏幕大小不匹配

嗯，任何一个方案都不是完美的，但也不会很糟糕。下面我们会提到一些可行的优化方案：

HTML5本地存储

对于支持HTML5 appcache /manifest特性的浏览器，我们可以将一些不常改动的静态资源存储到本地，比如css文件，css中用到的图片，以及一些js文件等：

1
2
3
4
5
6
7
8
9
10

CACHE MANIFEST
NETWORK:
/*
 
CACHE:
img/bg.jpg
img/days.otf
slideshow.js
slideshow.css
classList.js

然后将文件保存为manifest格式，并在HTML标签中引入即可：

<html manifest="responsive.manifest">

这样，用户在第一次访问的时候会慢一点儿，但是后续访问会很快，3G网络中也能为用户节省带宽。

移动设备优先

一种新的设计流程是，先为移动设备设计界面，然后将PC端作为一个扩展。

这样做的好处是显而易见的，移动终端不会加载多余的资源，也不会因为PC端的样式而重绘页面，同时也不会影响PC端的表现。

流体图片(fluid image)

页面中的图片有时会比手机/平板的屏幕（viewport）宽，这样会将页面容器撑开，但是移动浏览器又不能scroll，结果图片被切掉一部分，然后还会有一部分内容被隐藏掉，用户看不到。

解决这个问题的方法很简单，将img的最大宽度设置成100%就可以了：

img{max-width:100%}

嗯，这里的前提是，没有给img标签设置宽度和高度，否则显示会有问题。另外不建议直接设置width=”100%”，因为会把小图拉大，模糊显示。

同理，video标签和iframe标签的宽度也可以这样做，而且最好不要使用iframe，宽度是个问题，性能也是一个方面吧。

CSS3 image

这个方法有些惊艳

我们都知道可以用::before和::after伪元素+content属性来动态显示一些内容或者做其它很酷的事情，而且在CSS 2.1中即被支持。不过content属性在CSS 2.1中只能用于这两个伪元素中，而在CSS3中，任何元素都可以使用content属性了，这个方法就是结合css3 的attr属性和HTML自定义属性的功能：

<img src="image.jpg" 
	data-src-600px="image-600px.jpg" 
	data-src-800px="image-800px.jpg" alt="">

然后用media query来动态赋值：

1
2
3
4
5
6
7
8
9
10

@media (min-device-width:600px) { 
	img[data-src-600px] {
		content: attr(data-src-600px, url); 
	}
}
@media (min-device-width:800px) {
	img[data-src-800px] {
		content: attr(data-src-800px, url);
	}
}

当然，这种方法也有不足之处，比如PC端宽屏幕需要加载两个图片文件，然后我们也要为此准备多张图片文件等。

pre标签

有的网站，比如，像前端观察这样的技术博客，会用pre来显示源代码，而浏览器对pre标签默认设置white-space:pre，这样，代码就不会换行，从而撑开子容器，造成内容被隐藏的问题：

右边的文字被隐藏掉了。

解决方法很简单：

pre{
	white-space:pre-wrap
	word-wrap: break-word;
	word-break: break-all;/*如果要兼容IE，可以加上这句，连续字母断行的问题伤不起啊。。。。*/
}

当然，不只是pre标签，关键是white-space和word-break属性的值。

嗯，主要的技术和技巧其实就这些，大家不会陌生。下面是一些比较有用的工具什么的：

响应式网页设计工具与资源

国外在响应式网页设计上已经走的很远了，已经有很多工具和资源供我们参考和使用：

CSS 框架

• 320 and Up
• Mobile Boilerplate
• Golden Grid System
• Gridless
• Less Framework
• 1140 CSS Grid System
• Fluid 960 Grid System
• SimpleGrid
• Skeleton

实用工具

• Respond.js，让IE6-8支持meidia query
• Responsive Design Testing 简单而方便的测试网站的响应性的工具，输入网址即可看到网站在不同分辨率下的表现
• Resize My Browser 缩放浏览器工具，不过不支持chrome和opera浏览器
• Media Query Bookmarklet 顾名思义，这是一个关于media query的书签工具
• ProtoFluid 在线查看和调试网站对移动终端兼容性的工具，很赞
• ScreenFly 和ProtoFluid类似
• responsivepx 更直观的测试网站对不同分辨率的适配性

争论和总结

响应式网页设计被提出以来，争论就不断，其实核心问题只有两个个：太多的资源请求和有限的终端支持之间的矛盾、响应式的网页设计和移动终端在用户体验和视觉风格上的差异。前者不能容忍在弱小的手机/平板上通过龟速的3G/2G网络来加载一个笨重的PC端页面，而后者纠结响应式网站不像手机网站。

我的想法是，具体问题具体分析，比如，强内容的网站，完全可以尝试响应式网站，而重视觉和功能的网站，则可以尝试建立一个独立的移动网站。

另外，显然，响应式网页设计的大部分技术，是可以用在WebApp开发中的。

最后，欢迎各种吐槽、各种批评、各种建议、各种发散、以及各种新观点新技术～～欢迎发表评论～～

PS：如果你手上有android/iPhone，可以直接访问下前端观察。 :)

参考文章：

• Responsive Web Design Techniques, Tools and Design Strategies
• Responsive Web Design
• The ultimate responsive web design roundup

CSS

• 终于支持position:fixed了；
• 支持overflow:scroll了，通过-webkit-overflow-scrolling: touch;来实现：

  1 2 3 4

  selector{ overflow:scroll; -webkit-overflow-scrolling: touch; }

• CSS3 gradient语法更新，将-webkit-gradient(linear|radial)拆分为，-webkit-linear-gradient和-webkit-radial-gradient。PS，年初发表过一篇关于《webkit对于CSS3渐变样式语法的更新》的文章，看来现在就剩下android的webkit了。

HTML5

1. 新的兼容HTML5的解释器(parser)
2. 表单增强新增时间类型date, datetime, month, time和range支持，好赞：

   

   

   

   

   

   同时iOS5中safari也增强了number类型的input的验证功能。

• 支持web workers ，传说iOS3中短暂出现过web workers，不过后来消失了，现在又回来了。。。
• 增强ECMAScript5，测试结果显示支持情况跟上PC版的Safari 5.1了。
• 终于支持contenteditable属性
• 支持async script

其它特性：

• HTTP Pipelining支持，Android中webkit和Opera都支持了，Mobile Safari也跟进了。想要具体了解的可以看下这里和这里。
• inline SVG
• UIWebView 和主屏幕webapp升级到Nitro引擎(看下面的测试数据)
• 支持MathML
• CSS和其它文件不再并行下载，这貌似挺悲剧的，不过我很感兴趣这和HTTP Pipelining的关系。。。
• GPU硬件加速，虽然这个之前也有，但是效果并不是很显著，现在，在微软用于标榜IE9硬件加速的测试中，iOS达到了40FPS，而Windows Phone 7是24FPS，Nexus 2则只有可怜的10FPS——iOS4中只有2FPS。。。

一些测试数据

• HTMLTest：267分，iOS 4.3中是206分
• Sunspider JS Benchmark，JS性能测试：

  

  可见首页webapp是用上Nitro引擎了，但是悲剧的是UIWebView的性能却下降了。

  PS:中间的home screen page，@Jeanne 美女说是主屏幕，不过我的理解就是webapp，如有更好的翻译欢迎讨论。

总结

可以看出iOS 5中Safari改进还是蛮大的，而从最后webapp和UIWebView的性能测试来看，或许苹果更加重视了webapp，而不太赞成UIWebView+webapp的这种混搭的方式，虽然很多流行的app都是这种实现，比如著名的PhoneGap框架和Facebook/twitter等流行的在国内不能用的APP。。

参考资源：

• iOS 5 Top 10 Browser Performance Changes
• New Mobile Safari stuff in iOS5
• Safari on iOS 5, HTML5 evolution for iPhone and iPad

浏览器版本：IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.356.2 dev

受影响的浏览器：所有浏览器.

经常讲到css选择器命名规则，其实不只是在团队合作基础上来讲这个，每个浏览器,IE产品，火狐，苹果，谷歌，都会因为命名不规范会产生不同样式..

一、关于选择器的命名

W3C CSS2.1的 4.1.3 节中提到：标识符（包括选择器中的元素名，类和ID）只能包含字符[a- zA-Z0-9]和ISO 10646字符编码U+00A1及以上，再加连字号（-）和下划线（_）；它们不能以 数字，或一个连字号后跟数字为开头。它们还可以包含转义字符加任何ISO 10646字符作为一个数 字编码。

由于设计到的字符很多，本文只针对字符[a-zA-Z0-9]，再加连字号（-）和下划线（_）进行讨论。 关于CSS中允许使用的字符和大小写信息，请参考W3C CSS2.1的4.1.3节

二、差异及可能产生的问题

在W3C CSS2.1说明文档中，只提到选择器标识符不能以数字，或一个连字号后跟数字为开头。除 此之外，没有相关的说明。那么各浏览器下的表现是否遵循这一规则呢？

请观察如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

 
div{width:160px;height:20px;font-size:12px;line-height:20px;background- color:yellow;}
 
.f-1_f_{background-color:#d4d4d4;}
 
.1{background-color:#A8A8A8;}
 
.123456{background-color:#d4d4d4;}
 
.2demo{background-color:#A8A8A8;}
 
.2-demo {background-color:#d4d4d4;}
 
.2_demo {background-color:#A8A8A8;}
 
.-demo{background-color:#d4d4d4;}
 
.-2demo {background-color:#A8A8A8;}
 
._demo {background-color:#d4d4d4;}
 
._2demo {background-color:#A8A8A8;}
 
.-{background-color:#d4d4d4;}
 
.---{background-color:#A8A8A8;}
 
._{background-color:#d4d4d4;}
 
.——{background-color:#A8A8A8;}
 
._-{background-color:#d4d4d4;}
 
.-_{background-color:#A8A8A8;}
 
.-{background-color:#d4d4d4;}
 
.---_{background-color:#A8A8A8;}
 
.---123{background-color:#d4d4d4;}
 
.__123{background-color:#A8A8A8;}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div class="f-1_f_">字母开头</div>
<div class="1">单个数字</div>
<div class="123456">多个数字</div>
<div class="2demo">数字开头 + [a-z][A-Z]</div>
<div class="2-demo">数字 + "-" 开头</div>
<div class="2_demo">数字 + "_" 开头</div>
<div class="-demo">连字符(-)开头 + [a-z][A-Z]</div>
<div class="-2demo">连字符(-) + 数字 开头</div>
<div class="_demo">下划线(_)开头 + [a-z][A-Z]</div>
<div class="_2demo">下划线(_) + 数字 开头</div>
<div class="-">单个连字符(-)</div>
<div class="---">多个连字符(-)</div>
<div class="_">单个下划线(_)</div>
<div class=" 	">多个下划线(_)</div>
<div class="_-">下划线(_) + 连字符(-)</div>
<div class="-_">连字符(-) + 下划线(_)</div>
<div class=" 	-">多个下划线(_) + 连字符(-)</div>
<div class="---_">多个连字符(-) + 下划线(_)</div>
<div class="---123">多个连字符(-) + 数字</div>
<div class=" 	123">多个下划线(_) + 数字</div>

看看各浏览器下面的结果

观察上表，分析各浏览器下的表现，总结如下

从上面看到，我们可以直观的了解到选择器的命名在各浏览器下的支持情况有所不同。因此，如果选择器的命名不规范，将影响各浏览器下，样式渲染不一致。比如如下代码：

1
2

div{font-size:12px;background-color:yellow;width:150px;height:30px;line- height:30px;}
.20fontsize{font-size:18px;background-color:#d4d4d4;}

1

<div class="20fontsize">以数字开头的类名</div>

以数字开始的类名仅在IE6(Q)/IE7(Q)/IE8(Q)下被识别，而其它浏览器下则不识别（忽略该规则）

三、如何避免受此问题影响

坚持以字母开头命名选择器，这样可保证在所有浏览器下都能兼容。

四、关于团队合作的css命名规范

常用的css命名规则

头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guild

服务：service

注册：regsiter

状态：status

投票：vote

合作伙伴：partner

(二)注释的写法:

/* Footer */

内容区

/* End Footer */

(三)id的命名:

(1)页面结构

容器: container

页头：header

内容：content/container

页面主体：main

页尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

(2)导航

导航：nav

主导航：mainbav

子导航：subnav

顶导航：topnav

边导航：sidebar

左导航：leftsidebar

右导航：rightsidebar

菜单：menu

子菜单：submenu

标题: title

摘要: summary

(3)功能

标志：logo

广告：banner

登陆：login

登录条：loginbar

注册：regsiter

搜索：search

功能区：shop

标题：title

加入：joinus

状态：status

按钮：btn

滚动：scroll

标签页：tab

文章列表：list

提示信息：msg

当前的: current

小技巧：tips

图标: icon

注释：note

指南：guild

服务：service

热点：hot

新闻：news

下载：download

投票：vote

合作伙伴：partner

友情链接：link

版权：copyright

(四)class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

（2）字体大小,直接使用”font+字体大小”作为名称,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }

.bottom { float:bottom; }

(4)标题栏样式,使用”类别+功能”的方式命名,如

.barnews { }

.barproduct { }

注意事项::

1.一律小写;

2.尽量用英文;

3.不加中杠和下划线;

4.尽量不缩写，除非一看就明白的单词.

主要的 master.css

模块 module.css

基本共用 base.css

布局，版面 layout.css

主题 themes.css

专栏 columns.css

文字 font.css

表单 forms.css

补丁 mend.css

打印 print.css

直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radius时，浏览器并不能完美的渲染它们。不过，如果把这个图片用作背景图，你就可以可以给它添加任何样式了，浏览器也会很好地渲染。Darcy Clarke和我做了一个简单的教程，讲解如何使用jQuery来动态地制作完美的圆角图片。今天我将重温这个主题然后向你展示使用background-image的方法可以实现多少效果。我将向你展示如何使用box-shadow、border-radius 和 transition 来创作不同的图片风格。

先看下demo

问题 (见 demo)

看一下demo，请注意在第一行的图片中使用了border-radius和inset box-shadow。Firefox会直接在图片元素上渲染border-radius，但不会渲染inset box-shadow。chrome/safari则两者都不渲染。

解决方案

要让 border-radius 和 inset box-shadow 正常工作，解决方案就是将实际图片变作background-image.

动态方法

要想动态实现，可以简单的使用jQuery为每个图片元素外面包一个背景图片。下面的jQuery代码会将所有图片外面包一个span标签然后将图片用作其背景图片(jQuery代码由Darcy Clarke编写)。

1
2
3
4
5
6
7
8
9
10
11
12
13

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
	$("img").load(function() {
		$(this).wrap(function(){
			return '<span class="image-wrap ' + $(this).attr('class') + '" 
				style="position:relative; display:inline-block; background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
		});
		$(this).css("opacity","0");
	});
});
</script>

输出

上面的脚本将会输出下面的HTML代码：

1
2
3

<span class="image-wrap " style="position:relative; display:inline-block; background:url(image.jpg) no-repeat center center; width: 150px; height: 150px;">
	<img src="image.jpg" style="opacity: 0;">
</span>

圆形图片(见 demo)

现在，图片被用作背景图了，你可以给它添加任意你想要的样式上去。下面是一个简单的使用border-radius实现的圆形图片。如果你对CSS3不太了解，可以阅读下Basics of CSS3，也可以搜索一下前端观察。

CSS

1
2
3
4
5

.circle .image-wrap {
	-webkit-border-radius: 50em;
	-moz-border-radius: 50em;
	border-radius: 50em;
}

卡片风格(见 demo)

下面是一个像卡片的图片风格，用了多个inset box-shadow。

CSS

1
2
3
4
5
6
7
8
9

.card .image-wrap {
	-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
	-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
	box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

浮雕风格 (见 demo)

通过一点儿改变，我可以将卡片风格转换为浮雕。。。

CSS

1
2
3
4
5
6
7
8
9

.embossed .image-wrap {
	-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
	-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
	box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

软浮雕风格 (见 demo)

和浮雕风格真的很像，我只是加了1px的虚化～～

CSS

1
2
3
4
5
6
7
8
9

.soft-embossed .image-wrap {
	-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
	-moz-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
	box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

剪贴画风格(见 demo)

同样只是inset box-shadow，我可以让它看起来像剪贴画。

CSS

1
2
3
4
5
6
7
8
9

.cut-out .image-wrap {
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
	box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

变形和发光 (见 demo)

这个例子中，我为图片外容器增加了变形。mouseover的时候，它将从圆角形状变为圆形，然后增加了发光效果。发光效果通过多重box-shadow实现。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.morphing-glowing .image-wrap {
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
 
.morphing-glowing .image-wrap:hover {
	-webkit-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
	-moz-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
	box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
 
	-webkit-border-radius: 60em;
	-moz-border-radius: 60em;
	border-radius: 60em;
}

发光遮罩 (见 demo)

发光渐变遮罩是通过:after伪元素实现的。。。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

.glossy .image-wrap {
	-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
	-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
 
.glossy .image-wrap:after {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 50%;
	top: 0;
	left: 0;
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
 
	background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));
	background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
}

倒影 (见 demo)

这个例子中，我将遮罩渐变移动到底部，于是它就成了倒影。。。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.reflection .image-wrap:after {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 30px;
	bottom: -31px;
	left: 0;
 
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
 
	background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.3)), color-stop(100%,rgba(255,255,255,0)));
	background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%);
}
 
.reflection .image-wrap:hover {
	position: relative;
	top: -8px;
}

光泽和倒影(见 demo)

这个例子中，我同时使用了:before和:after伪元素来实现带倒影的光泽效果。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

.glossy-reflection .image-wrap {
	-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
	-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
 
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
 
.glossy-reflection .image-wrap:before {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 50%;
	top: 0;
	left: 0;
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
 
	background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));
	background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
}
 
.glossy-reflection .image-wrap:after {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 30px;
	bottom: -31px;
	left: 0;
 
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
 
	background: -moz-linear-gradient(top, rgba(230,230,230,.3) 0%, rgba(230,230,230,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,230,230,.3)), color-stop(100%,rgba(230,230,230,0)));
	background: linear-gradient(top, rgba(230,230,230,.3) 0%,rgba(230,230,230,0) 100%);
}

胶带风格(见 demo)

这里使用了:after伪元素来在图片顶部实现了胶带风格的渐变。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.tape .image-wrap {
	-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
	-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
	box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
}
 
.tape .image-wrap:after {
	position: absolute;
	content: ' ';
	width: 60px;
	height: 25px;
	top: -10px;
	left: 50%;
	margin-left: -30px;
	border: solid 1px rgba(137,130,48,.2);
 
	background: -moz-linear-gradient(top, rgba(254,243,127,.6) 0%, rgba(240,224,54,.6) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,243,127,.6)), color-stop(100%,rgba(240,224,54,.6)));
	background: linear-gradient(top, rgba(254,243,127,.6) 0%,rgba(240,224,54,.6) 100%);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.2);
}

变形和着色 (见 demo)

在下面的这个例子中，我用了 :after元素来在mouseover的时候添加发光渐变。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

.morphing-tinting .image-wrap {
	position: relative;
 
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
 
.morphing-tinting .image-wrap:hover {
	-webkit-border-radius: 30em;
	-moz-border-radius: 30em;
	border-radius: 30em;
}
 
.morphing-tinting .image-wrap:after {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
 
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
 
	-webkit-border-radius: 30em;
	-moz-border-radius: 30em;
	border-radius: 30em;
}
.morphing-tinting .image-wrap:hover:after  {
	background: -webkit-gradient(radial, 50% 50%, 40, 50% 50%, 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
	background: -moz-radial-gradient(50% 50%, circle, rgba(0,0,0,0) 40px, rgba(0,0,0,1) 80px);
}

羽化边缘的圆形(见demo)

发散渐变也可以用作遮罩层来实现圆形羽化效果。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.feather .image-wrap {
	position: relative;
 
	-webkit-border-radius: 30em;
	-moz-border-radius: 30em;
	border-radius: 30em;
}
 
.feather .image-wrap:after  {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
 
	background: -webkit-gradient(radial, 50% 50%, 50, 50% 50%, 70, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
	background: -moz-radial-gradient(50% 50%, circle, rgba(255,255,255,0) 50px, rgba(255,255,255,1) 70px);
}

浏览器支持

本文的方法可以在支持border-radius、box-shadow、:before和:after伪元素的浏览器上，比如Chrome/Safari/Firefox等，而在一些落后的浏览器比如IE9(包括IE9)则不能完全支持——IE6/7/8没有任何表现，IE9会有普通的圆角。

发挥你的创造力

正如你看到的，你几乎可以使用:before和:after伪元素实现任何效果。如果你有用CSS3实现更多的创意图片效果，欢迎通过评论与大家分享。

PS,本文中使用:before/:after来实现伪元素，其实我更建议使用双冒号来实现，虽然单冒号有更多的浏览器支持，但是对于这些CSS3实现的效果来说，双冒号更安全一些。更多的原因，可以参考《:before和::before的区别》

IE开发者中心给到了一份详细的针对前端开发者的文档，列出了IE10支持的HTML5和CSS3新特性。嗯，它终于跟上了：

CSS3

• css region
• css3多列
• Flexbox
• grid
• 定位浮动(positioned float)
• 3D变换(3D transfrom)
• 动画(animation)
• 渐变(gradient)
• text-shadow
• 去掉样式表限制——在IE9之前的版本中，每个页面最多只能加载31个样式表文件，@import也只能最多嵌套4层，IE10中去掉了这些限制。

HTML5

其它

嗯，新东西很多，看起来还是很给力的。

需要注意的是，IE10对CSS3新特性的支持，大部分还是需要-ms-前缀的。

在某个项目中，很多元素需要定位在一个地图层上面，这里就要用到很多绝对定位或者相对定位的元素，但是这样的话，这些浮在上面的div或者其它元素一般都会给个宽高，或者relative的元素可以不给宽高，这个时候，这些元素就会盖住下面的地图层，以至于地图层无法操作。。。

然后正好在Google map见到了类似的问题，拿来当例子来说：

Google map中左上角的操作区域占位是挺大的，如红色框区域，然后在这个区域是无法操作地图层的。那么我们就可以给这个div设置 pointer-events:none，然后你就会发现下面的地图就可以拖动和点击了。

但是悲剧的是，操作区域本身却无法操作了，直接被无视掉了。不过不用担心，我们可以给里面的元素重新设置为 pointer-events:auto，当然，只给需要操作的元素区域设置。

貌似有点儿纠结，不过这样可以保证地图本身的可操作区域最大化。

嗯，上面只是个简单的例子，来看下具体用法：

pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

pointer-events属性有很多值，但是对于浏览器来说，只有auto和non两个值可用，其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。

pointer-events属性值详解

• auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。
• none——元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。
• 其它属性值为SVG专用，这里不再多介绍了。

浏览器兼容性

Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性，IE6/7/8/9都不支持，Opera在SVG中支持该属性但是HTML中不支持。好吧，还是有点儿悲催～～

1. 透明化了盒子，通透性强了，因为透明了，所以背部的三个面也就要做出来了，所以总共6个面，比原作多3个；
2. 投影镜像，让盒子的立体感更强烈；
3. 边角线的处理，让盒子面与面之间过渡和谐。

你可以点击这里下载 源代码（只是写了moz下的效果，webkit的就没写了）

盒子的HTML结构很简单，如下：

1
2
3
4
5
6
7
8

<div>
<div>前</div>
<div>后</div>
<div>左</div>
<div>右</div>
<div>上</div>
<div>下</div>
</div>

一个大盒子包住“前、后、左、右、上、下”6个面，因为定位产生层高的关系，所以它的顺序其实是“后、下、左、前、上、右”，下面的div就会自然的叠在上面，就可以不写z-index了。

一、框架定位

初始化盒子面，顶好宽高、定位、背景色等属性，然后把变换原点设定在右上角。

盒子面一个个做，先从简单的入手，前后左右难度系数是一样的，一个斜切SKEW效果就可以实现，然后就是再分开定位：“前、后面”用 skew(0deg,20deg); Y轴正向斜切，“左、右面”用skew(0deg,-20deg); Y轴负向斜切，然后再定位对齐，基本的框就出来 了。

然后就是鸡肋“上、下面”，它需要旋转后斜切才能完成，所以难度系数也就上升了，这里我说 “旋转后斜切”，而不是 “斜切后旋转”，是有区别的，我的写法如下：

-moz-transform:rotate(-40deg) skew(30deg,20deg);

如果这样写：

-moz-transform:skew(30deg,20deg) rotate(-40deg);

那跟预期的效果不一样，确定了的斜切效果会因为后面的旋转而变形。

不知道你有没有亲手做过那个盒子，我在做的时候发现，为什么它顶部的“盒子盖”比侧面的“盒子壁”多嵌套了一层DIV，用来分离transform变换效果，我尝试着只用一个DIV去实现，结果证明，只要先写rotate再skew就可以保持skew的斜切效果，从而html结构跟css代码也就简洁了很多。

二、边框线

如果你看了代码，没有头晕的话，会不会有这么一个疑惑，为什么不用border来写边框线?

如果用border来写的话，border的宽度会跟width重叠，导致盒子占据的空间为200+1+1=202px，很恶心的数字，而且border也不贴着边界，如图：

所以用这样一种做法来实现边框效果：box-shadow/text-shadow ；

一般我们是用border来给元素描边，前几天逛论坛的时候，看到这样一种做法：给文字描边。

一般思维会想到text-shadow这个属性，但是它是投影，跟描边还是有区别的，text-shadow写法如下：

text-shadow:2px 0px 0px #f00；

投影效果如图：

具体的投影资料可以参考我这篇文章：CSS3阴影；

上面是在没有羽化的情况下向右偏移，然而text-shadow可以多重投影，那么如果向上下左右四个方向同时投影，会怎么样呢?

text-shadow:2px 0px 0px #f00,0px -2px 0px #f00,-2px 0px 0px #f00,0px 2px 0px #f00;

投影效果如图：

就变成适应文字形状的描边效果了，当初因为border不能满足文字的描边需求，才想出这样的法子来实现描边，那现在反推，既然border不能用来描边了，那就用box-shadow投影描边的方法来实现边框。

做出来的效果如下：

我给底部写了个投影：

-webkit-box-shadow:-1px 1px 2px rgba(50,50,50,0.1);

少许的向前向右偏移，基本的造型效果就已经出来了，但是这样还不行，盒子的透明是透明了，但是感觉朦朦胧胧的，应该加强透明的处理，要不然体现不出通透性（可以跟第一个图对比下）。

三、通透性

每个面受光不同，所以透明度也应该有所区别，我把上，前，右对着浏览者的透明度调低于后面，然后拉出半透明到透明的渐变叠加到基本的盒子颜色上，产生层次，我都是很淡的过渡色叠加，渐变写法如下：

background:-moz-linear-gradient(-45deg, rgba(255,255,255,0.3),rgba(255,255,255,0.2) 40%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0.1));

由左上到右下拉斜线渐变，从0% 0.3到40% 0.2，70% 0.2到100% 0.1；颜色很淡，如果把系数调大调深的话，渐变色就会很明显，由于里面各个面的渐变各不同，就不一一解释，相信看了源文件就会明白的了，我也是跟着自己感觉拉的渐变，没有很专业的光线投射研究，如果有错的地方你看出来了还望指出。

当调整出各个面的颜色之后，发现“前上右”面与面之间有边线分割，看起来很整齐，但是后面我原本没有画边线，结果‘左’跟‘后’有点混，所以还是12条边线一一画出，妥当些，前面的边线透明度为0.6，侧面的0.4，后面的0.2，突出层次。

四、投影

原本想用reflect来实现投影的，但是效果不理想，投影会夹杂着原图层的背景色，做不出来半透明到透明的效果来，而且reflect是webkit独 有的，firefox没有，另想它法，然而不可能为了投影效果添加新标签，得不偿失，在抛弃IE的情况下自然而然的会想到伪类，上面边框渐变 已经用了after，所以这里的投影我用before来做，同时，伪类做投影还有个好处：伪类层是相对于原图层的，所以修改原图层位置变形状态的时候，伪类层也会相对的修改。定位在对应的面正下方，向着用户的只有前跟右，所以就做了两个投影，如图：

普通状态盒子是闭合的，如“前”面所示，伪类层也跟着原图层一样进行了斜切变换，然后我设置了鼠标滑过就“打开”的效果，仅仅是这样一行代码：

.box .box_right:hover{-moz-transform:skew(0deg, 0deg);}

让不用去修改伪类投影层，它自动的就适应了原图层，恢复了变换状态。

还有一个点，就是投影是由上至下呈半透明至透明的渐变，对于背景色这个很容易就可以实现，但是边框呢？

我还没处理边框的状态是这样的：

下面的投影是“平”，所以边框线的渐变投影务必做出来，那怎么才能实现边框的纵向渐变，网上有很多关于渐变边框的做法，不过都是横向的利用多重边框的特性来制作，纵向的没有，我尝试用border来写，给border-color写个渐变，结果根本读不出来，单单调节border的透明度也只是做到单色透明，不能渐变透明，观察之后，想出了个“烂点子”，我上面说了，投影是由上至下呈半透明至透明的渐变，那么把两个不透明的东西叠加在一起会怎么样？

比如一个透明度为0.3的层叠在另外一个透明度为0.3的层上面，那就会在交界的地方产生一个透明度为0.6的区域，如图：

说到这样你应该懂了吧，我写了这么一句修改面的宽度：

.under .box_before:before{ width:201px;}

让两个面半透明面重叠，这样中间重叠区域就会变深，做出了“伪边框”的效果，至于到透明部分，0 + 0 = 0，所以透明的区域依然透明，从而实现了边框纵向渐变的效果。

五、内容

我原本只是想做个盒子，既然做出来了，当然要跟实际项目联系一下，如果允许的话我也想运用到真正的项目上去，将盒子作为载体模块，在上面发布文章，甚至我想把他弄成可以旋转的做图片墙。

挂上文字后效果如下：

html代码如下：

<div class="inBox">
<div class="conBox">
<h3>中秋节要来啦</h3>
<p>中秋节要来啦，龙祝大家中秋有月饼吃...哈根达斯冰皮的...</p>
</div>
</div>

之所以要在inBox里面套一个conBox，conBox用来设定内边距padding，这样做是因为inBox设定了width，如果width跟padding混在一起叠加，会使容器的宽度变形，所以一般分开为妙；至于h3写个title，是因为我在写gotrip的时候，h1，h2，h3标题没有统一分级，使用混乱，而css是这样写的，比如：.inBox h1{ };

当时写了一批之后有同事提出需要将h1改成h3，如果我一开始就这样写.inBox .title{ }，那他说修改的时候我也就只需要修改html标签，我不用动css的，吃一堑长一智，这里写下来跟大家分享。当然有时候也不必太过强求，毕竟 起类名是一件很伤脑细胞的事 哈。

个人博客原文地址：纯CSS3透明水晶盒