CSS3 边框

CSS3 边框

通过 CSS3制边框 - ，比如 PhotoShop。

：

  • border-radius
  • box-shadow
  • border-image

属性
border-radius
box-shadow
border-image

Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。

Firefox、Chrome 以及 Safari 。

注释：对于 border-image，Safari 5 缀 -webkit-。

Opera 支持 border-radius 和 box-shadow 对于 border-image 需要前缀 -o-。

CSS3 圆角边框

在 CSS2 的图片。

在 CSS3 易的。

在 CSS3 中，border-radius 建圆角：

圆角哦！

实例

向 div 角：

div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}

CSS3 边框阴影

在 CSS3 中，box-shadow

实例

向 div 框阴影：

div
{
box-shadow: 10px 10px 5px #888888;
}

CSS3 边框图片

通过 CSS3 的 border-image ：

border-image

图片

实例

建围绕 div ：

div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

性

属性 描述 CSS
border-image 设置所有 border-image-* 属性。 3
border-radius 个 border-*-radius 属性。 3
box-shadow 阴影。 3