CSS3圆角边框和边界图片效果实例

那么让我们来详细讲解“CSS3圆角边框和边界图片效果实例”的完整攻略。

一、CSS3圆角边框效果

1.1 border-radius属性

border-radius属性是CSS3中新增的一种属性，它可以实现圆角边框的效果。该属性可以设置1到4个参数值，分别表示左上角、右上角、右下角和左下角的半径，如果缺省，则默认为0。

div{
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  border-radius: 10px;
}

上面的代码可以实现一个左右各有10px圆角的正方形边框。需要注意的是，该属性目前还没有被IE6-IE8所支持。如果需要考虑到这些浏览器，可以考虑使用CSS3Pie等插件来兼容。

1.2 box-shadow属性

box-shadow属性可以为一个元素添加一个或多个阴影效果。该属性也是CSS3中新增的一种属性。

div{
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  border-radius: 10px;
  box-shadow: 2px 2px 3px #333;
}

上面的代码为一个左右各有10px圆角的正方形边框添加了一个2px宽，向右下方偏移2px，模糊度为3px，颜色为#333的阴影效果。

二、CSS3边界图片效果

2.1 border-image属性

border-image属性可以在元素边框周围添加一张图片，并设置其缩放、分割等效果。该属性需要至少设置border-image-source、border-image-slice、border-image-width3个属性值。

div{
  width: 200px;
  height: 200px;
  border-image: url(border-image.png) 30 30 30 30 repeat;
}

上面的代码为一个大小为200x200px的元素设置了一张border-image.png的图片边界效果，边界缩进距离为30px，重复方式为repeat。

2.2 border-image-outset属性

border-image-outset属性可以设置图片边界离元素边框的距离。

div{
  width: 200px;
  height: 200px;
  border: 10px solid #000;
  border-image: url(border-image.png) 30 30 30 30 repeat;
  border-image-outset: 10px;
}

上面的代码为一个大小为200x200px的元素设置了一张border-image.png的图片边界效果，边界缩进距离为30px，重复方式为repeat，距离元素边框的距离为10px。

以上就是关于“CSS3圆角边框和边界图片效果实例”的完整攻略了，希望对你有所帮助。