尽管是最被期待的CSS3 特性 (甚至它在CSS2中就已经被引入了)， @font-face在网站上仍然没有像其它CSS3属性那样被广泛采用.这主要因为字体授权和版权问题：嵌入的字体很容易从网站上下载到，这是字体厂商的主要顾虑。
尽管如此，授权我呢提貌似已经开始解决了。TypeKit 承诺将制定一个方案，以使设计师和字体厂商更容易的统一授权问题，这将显著的充实网站设计中的排版并使@font-face 属性在实际工作中可用。
Mozilla实验室JetPack 网站采用font-face规则来使用DroidSans 字体。少数使用该属性的网站之一是新上线的JetPack MozillaLabs.
- @font-face{
- font-family: 'DroidSans';
- src: url('../fonts/DroidSans.ttf') format('truetype');
- }
要想在你的网站中使用嵌入字体，你必须独立的生命每个样式(比如， normal, bold 和italic)。请确保只使用被授权为使用到网站的字体并在需要的时候给字体的设计师一些表扬。在定义了@font-face 规则之后，你就可以用普通的font-family 属性来引用该字体了：
广州网站建设,网站建设,广州网页设计,广州网站设计
- p {
- font-family: "DroidSans";
- }
如果一个浏览器不支持@font-face，它将使用font-family(CSS字体库)属性中指定的下一个字体。对支持的浏览器来说，如果@font-face字体是一个奢侈品（只有少数元素用到），这对一些网站是可行的；但是如果该字体在设计中占有一个主要的角色或者是公司的视觉特征的一部分，你就可能想使用其它的解决方案，比如sIFR 或Cufón。尽管如此，请记住，这些工具对标题或较短的文字更适合，复制和粘贴此类内容比较困难而且对用户并不友好。
在网站中使用此类字体不是很好吗？Dave Shea 使用Cufón 和Museo Sans来做的实验。很漂亮！浏览器支持: @font-face 被Safari 3.1+和chrome支持。Internet Explorer 支持EOT 字体。 Opera 10 和Firefox 3.5 将会支持它。
8. 圆角（边框半径）
Border-radius 无需背景图片就能给HTML元素添加圆角。现在，它可能是使用最多的CSS3属性了，很简单的原因是使用圆角比较好而且不会对设计和可用性有冲突。
不同于添加Javascript或多于的HTML标签，仅仅需要添加一些CSS属性并从好的方面考虑。这个方案是清晰的和比较有效的，而且可以让你免于花费几个小时来寻找精巧的浏览器方案和基于Javascript圆角。Sam Brown的博客在标题、分类和链接处使用了border-radius.
Sam Brown在他的博客的标题、分类、链接和div中大量的使用了border-radius属性。使用图片来实现该效果将会比较费时的，这是在项目中使用CSS3属性是提高开发效率的重要步骤的原因之一
为了给类别链接添加圆角，Sam 使用了下面的CSS片段：
- h2 span {
- color: #1a1a1a;
- padding: .5em;
- -webkit-border-radius: 6px;
- -moz-border-radius: 6px;
- }
我们可以做的更进一步，添加原始的CSS3 属性和Konqueror 属性扩展，如下:
- h2 span {
- color: #1a1a1a;
- padding: .5em;
- -webkit-border-radius: 6px;
- -moz-border-radius: 6px;
- -khtml-border-radius: 6px;
- border-radius: 6px;
- }
如果我们想在我们的元素中的某个特定的角上应用此属性，我们可以单独的指定每个角：
- div {
- -moz-border-radius-topright: 6px;
- -moz-border-radius-topleft: 6px;
- -moz-border-radius-bottomright: 6px;
- -moz-border-radius-bottomleft: 6px;
- -webkit-border-top-right-radius: 6px;
- -webkit-border-top-left-radius: 6px;
- -webkit-border-bottom-right-radius: 6px;
- -webkit-border-bottom-left-radius: 6px;
- border-top-right-radius: 6px;
- border-top-left-radius: 6px;
- border-bottom-right-radius: 6px;
- border-bottom-left-radius: 6px;
- }
浏览器支持： border-radius只有所有版本的IE浏览器和Opera不支持，Webkit和Gecko核心的浏览器都支持。 9. 边框图片
border-image属性允许你在元素的边框上设定图片， 让你从通常的solid, dotted和其它边框样式中解放出来。该属性给设计师一个更好的工具，用它可以方便的定义设计元素的边框样式，比background-image属性(对高级设计来说) 或枯燥的默认边框样式更好用。我们也可以明确的定义一个边框可以被如何缩放或平铺。
SpoonGraphics 博客为它的图片边框使用了border-image 属性。在SpoonGraphis blog中，border-image被用于图片边框，如下所示：
- #content .post img {
- border: 6px solid #f2e6d1;
- -webkit-border-image: url(main-border.png) 6 repeat;
- -moz-border-image: url(main-border.png) 6 repeat;
- border-image: url(main-border.png) 6 repeat;
- }
要想定义border-image，我们必须指定图片地址，图片的那部分将被剪切并用于元素的每一个边上，以及图片是否被缩放或平铺。为了制作一个使用下面的图片作为边框的div ，我们应该使用下面的代码(我们将为这个例子添加Opera 和Konqueror 支持):
广州网站建设,网站建设,广州网页设计,广州网站设计
- div {
- border-width: 18px 25px 25px 18px;
- -webkit-border-image: url(example.png) 18 25 25 18 stretch stretch;
- -moz-border-image: url(example.png) 18 25 25 18 stretch stretch;
- -o-border-image: url(example.png) 18 25 25 18 stretch stretch;
- -khtml-border-image: url(example.png) 18 25 25 18 stretch stretch;
- border-image: url(example.png) 18 25 25 18 stretch stretch;
- }
该属性的最后一个值可以是stretch (默认), round (只有一个平铺了整数倍的图片被填充在允许的地方) 或repeat。在我们的例子中，上下左右边框图片被拉伸。如果我们只想顶部和底部边框被拉伸，我们可以使用下面的CSS:
- div {
- (...)
- border-image: url(example.png) 18 25 25 18 stretch repeat;
- }
我们可以可以单独的指定每一个角，如果我们想为每一个角使用不同的图片：
- div {
- border-top-image: url(example.png) 5 5 stretch;
- border-right-image: url(example.png) 5 5 stretch;
- border-bottom-image: url(example.png) 5 5 stretch;
- border-left-image: url(example.png) 5 5 stretch;
- border-top-left-image: url(example.png) 5 5 stretch;
- border-top-right-image: url(example.png) 5 5 stretch;
- border-bottom-left-image: url(example.png) 5 5 stretch;
- border-bottom-right-image: url(example.png) 5 5 stretch;
- }
如果浏览器不支持border-image 属性，它将无视这些属性，并只应用定义的其它边框属性，比如border-width 和border-color.浏览器支持: border-image 目前只有Webkit核心浏览器支持。不太确定Firefox的下一个版本是否支持。
广州网站建设,网站建设,广州网页设计,广州网站设计
