社交网络的普及使许多网站变得更加以用户为中心。这意味着您可以通过Twitter、Facebook、Tumblr、Pinterest和其他工具找到大量新的配置文件功能，并直接连接OAuth应用程序。通常，配置文件照片是每个配置文件网页设计的一个共同方面。照片或头像可以由用户上传，有时还可以直接从他们的其他账户在线下载。

湛江企业网站设计在本教程中，我想用CSS 3演示5种特定的用户化身样式。您可以在您自己的网站或创业想法中使用这些功能中的任何一个。在新的CSS特性得到更广泛的支持的情况下，设计趋势一直在推进。这意味着前端开发人员可以开始真正突破我们如何在网页中设置媒体样式的界限。配置文件页面的用户体验肯定是一个很好的起点。

现场演示 – 下载源代码

创建网页

在构建本教程时，我特别关注使用尽可能少的HTML。只有五种化身样式中的一种将使用外部容器元素，这是一个光滑的反射效果。所有的技术都可以直接从CSS样式表中复制，不会有太大的麻烦。但让我们先看看我的一个样本index.html档案。

在文档标题中，我只引用两个主要文件，以及一个特定于IE的JS脚本。我的基本styles.css将创建页面效果和布局结构。再加上一个习俗GoogleWeb字体是为了使设计更有新意。HTML5shiv文档仅适用于早期版本的InternetExplorer，该版本不正确地在页面上呈现HTML 5元素。这并不是让所有东西都正常工作的要求，但使用条件注释包含快速修复JS文件并不有害。

现在，我在页面中还有一堆多余的HTML，它只与布局结构有关。我想把重点放在头像容器上，因为这些是页面上唯一不同的元素。每个内容区域由带有化身和用户信息的左侧侧栏组成。这是对齐的内容div与导航选项卡和“用户提要”块区域。

内左撇子您将发现与div一起的大量文本块。.avatar-容器。如果您将任何HTML复制到自己的页面中，只需包含avatar容器div和内部img元素。

“阿凡达”照片的造型

我用过同样愚蠢的化身对于每个配置文件页设计。因为样式是用边框照片本身可能在使用内部边距/填充的各种样式中显得较小。但这也将保持图像标签固定在250×250像素，无论我们需要包括多少额外的空间。

我使用的第一个示例是围绕一个较老的DiggV 3风格的化身构建的。图像背景设置为白色，因此无论在网站背景中使用什么颜色，图像都将脱颖而出。图像容器上的框影属性的小显示也将在页面上突出显示。其他的每一种风格都是非常相似的，但在他们自己的方式上是不同的。

avatars#02-04的设计仍然使用常见的CSS 3属性。第二个例子是使用100%边界半径的圆圈化身。这将在所有浏览器中显示相同的内容，您可以利用供应商前缀来获得更大的支持。旧版本的IE也有解决办法，您可以使用本机CSS属性获得圆角效果。

例03和#04也使用圆角，但程度要小得多。第三是类似于一个完整的正方形头像与一个直接下降阴影的图像。类似地，我的第四个例子使用了一个更暗的背景，边缘周围有虚线边框。它看上去更像一个剪掉的图像，并且很快就与其他页面元素分开了。现在，我最后的化身风格有点复杂，但显示了一个特殊的显示。

CSS 3的思考

我想给你学分丹·伊登用于在jsFiddle示例页面上共享以下许多代码片段。我们可以使用一个名为-webkit-框-反射为化身图像生成苹果风格的iTunes反射。对于CSS 3规范来说，这仍然是非常新的，而且在任何版本的InternetExplorer中似乎都不支持。Firefox确实具有类似的属性-Moz-元素，但这也需要另一个容器元素来存储反射图像。

你应该注意到这并不是唯一的独特效果添加到这个化身风格。丹的小提琴例子还演示了我们如何使用背景梯度在较小的不透明度，以模拟光泽的塑料光泽效果。这可以使用内置框阴影和CSS梯度作为IMG背景和减少不透明度的组合来实现。请查看我的现场演示示例，以了解这一效果。