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

猫性男孩 · 发表于 2013-4-18 10:47:51

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的下一个版本是否支持。

扩展阅读：

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 也将提供很好的支持。

扩展阅读：

		自动登录	找回密码
密码			立即注册

[分享] 提升你设计水平的CSS3新技术（5）

站长推荐 /1