提升你设计水平的CSS3新技术（5）

猫性男孩

如果我们想在我们的元素中的某个特定的角上应用此属性，我们可以单独的指定每个角：

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

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核心的浏览器都支持。

扩展阅读：

• border-radius: W3C Working Draft
• Border-radius: create rounded corners with CSS! — CSS3.info
• Introduction to CSS3, Part 2: Borders
• An Ode to border-radius
• CSS3 Border-Radius and Rounded Corners
• 9. 边框图片
  border-image 属性允许你在元素的边框上设定图片， 让你从通常的solid, dotted 和其它边框样式中解放出来。该属性给设计师一个更好的工具，用它可以方便的定义设计元素的边框样式，比background-image 属性(对高级设计来说) 或枯燥的默认边框样式更好用。我们也可以明确的定义一个边框可以被如何缩放或平铺。
  
  SpoonGraphics 博客为它的图片边框使用了border-image 属性。
  在SpoonGraphis blog中，border-image被用于图片边框，如下所示：

  1 2 3 4 5 6

  #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 支持):
  

  1 2 3 4 5 6 7 8

  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:

  1 2 3 4

  div { (... ) border-image : url ( example.png ) 18 25 25 18 stretch repeat ; }

  
  
  我们可以可以单独的指定每一个角，如果我们想为每一个角使用不同的图片：

  1 2 3 4 5 6 7 8 9 10

  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的下一个版本是否支持。
  扩展阅读：
  • The ‘border-image’ property: W3C Working Draft
  • Border-image: using images for your border — CSS3.info
  • border-image in Firefox
  • border-image demonstration page
  • Replicating iPhone Buttons the “webkit” way!
    
  10. 盒阴影
  box-shadow 属性可以对HTML元素添加阴影 而不用额外的标签或背景图片。类似text-shadow 属性，它增强设计的细节；而且因为它不影响内容的可读性，随意他可以是增加那种额外感觉/效果的一种很好的方法。
  
  10to1 为它的导航北京和hover状态使用了box-shadow 属性.
  
  
  10to1 为其导航区域增加的一个简单的阴影并将该属性应用于导航链接的hover效果:

  1 2 3 4 5 6 7 8 9

  #navigation { -webkit-box-shadow : 10px #000 ; -moz-box-shadow : 10px #000 ; } #navigation li a :hover , #navigation li a :focus { -webkit-box-shadow : 5px #111 ; -moz-box-shadow : 5px #111 ; }

  
  
  box-shadow属性可以用多个值：水平偏移、垂直偏移、模糊半径、伸展半径和阴影颜色。水平和垂直偏移和阴影色使用的最多。
  在一个div上应用红色阴影，右边和下边偏移4px，无模糊，我们可以使用下面的代码：

  1 2 3 4 5

  div { -moz-box-shadow : 4px 4px #f00 ; -webkit-box-shadow : 4px 4px #f00 ; box-shadow : 4px 4px #f00 ; }

  
  
  浏览器支持: box-shadow目前只有Webkit核心浏览器支持，但是即将发布的Firefox 3.5 也将提供很好的支持。
  扩展阅读：
  • The ‘box-shadow’ property — W3C Working Draft
  • Box-shadow, one of CSS3’s best new features — CSS3.info
  • Apple’s Navigation bar using only CSS
  • Box Shadow — Surfin’ Safari blog