位置：首页>> 网络编程>> 网页设计>> 提升你设计水平的CSS3新技术[译]（10）

提升你设计水平的CSS3新技术[译]（10）

作者：暴风彬彬　来源：彬go　发布时间：2009-08-02 20:51:00　

标签：设计,浏览器,CSS3,新技术

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

扩展阅读：

第一页上一页 8 9

11 12 下一页

投稿

提升你设计水平的CSS3新技术[译]（10）

9. 边框图片

扩展阅读：

猜你喜欢