HTML5有一个新的属性，contenteditable，它可以应用于任何元件，使得它可以直接在浏览器窗口中编辑。想与一个预定义的值的文本输入，但它还可以从字面上任何元素。表单元素如文本输入支持：重点伪类，它允许我们风格的元素时，点击后或导航。给人一种元素contenteditable属性意味着它现在也支持：重点伪类，开辟了一些有趣的可能性！
我们将利用这个小把戏来扩大图像（就像一个没有覆盖灯箱）在一些内容。
HTML5代码
HTML5有很好的元素包括标题图像。
<section class="image-gallery">
<figure>
<img src="images/img-1.jpg" alt="jump, matey" />
<figcaption">Jump!</figcaption>
</figure>
</section>
我们只是给图形元素的TabIndex，从而成为焦点。
<figure tabindex=1>
给每个后续的元素添加tabindex值，图像可以通过Tab很好的键盘！
Images
图像将是“全尺寸”的。
这意味着他们将缩减为正常显示在页面上，并扩大了我们的神奇的CSS扩展。因为浏览器不支持这种潜在的浪费带宽。权衡的是你的回调。
CSS代码
正常显示：
figure {
width: 120px;
float: left;
margin: 0 20px 0 0;
background: white;
border: 10px solid white;
-webkit-box-shadow: 0 3px 10px #ccc;
-moz-box-shadow: 0 3px 10px #ccc;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-webkit-transition: all 0.7s ease;
-moz-transition: all 1s ease;
position: relative;
}
figcaption {
text-align: center;
display: block;
font-size: 12px;
font-style: italic;
}
figure img {
width: 100%; /* Scale down */
}
:focus不是CSS3的部分，但shadows, transforms, 和 transitions是。悬停状态将图像旋转一点和:focus样式（当图像被点击），将它扩大，转动一次，并确保它在顶部的 z-index。
figure:hover {
-webkit-transform: rotate(-1deg); -moz-transform: rotate(1deg);
-webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
}
figure:focus {
outline: none;
-webkit-transform: rotate(-3deg) scale(2.5); -moz-transform: rotate(-3deg) scale(2.5);
-webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
z-index: 9999;
}
浏览器的兼容性
HTML5的contenteditable属性是在Firefox 3.6 + 4 +支持，Safari，Chrome，Opera（10.6只试验了）。注意属性将级联到所有的子元素。在我们的演示，具有图像和图标题被编辑并没有多大意义，所以我们可以把它关掉单独对他们。
<figure contenteditable="true">
<img src="images/img-1.jpg" alt="jump, matey" contenteditable="false" />
<figcaption contenteditable="false">Jump!</figcaption>
</figure>
如果你忘了关掉图像的editablity，Firefox可以看起来有点时髦的给你调整处理图像。更新：另一个理由来使用tabindex而不是。
opera方面的子元素不可编辑，但仍然运行在他们的拼写检查，将红色下划线单词拼错，发现可能会有点怪。
我们的演示还依赖转变为“工作”，虽然，它只在当前的WebKit浏览器和火狐4支持+。支持Firefox 3.6的变换而不是过渡。
一是图像只是不扩大，这当然是没有什么大不了的。