CSS3--CSS3边框与圆角

CSS3圆角

border-radius

一个最多可以指定四个border-*-radius属性的复合属性,这个属性允许你为元素添加圆角边框

语法

border-radius: 1-4 length | %;

兼容性

IE9+, Firefox4+, Safari5+

1
2
3
4
5
6
7
8
9
border-radius: 10px;                //四个圆角值相同
border-radius: 5px 5px; //左上和右下、右上和左下
border-radius: 5px 5px 5px; //左上、右上和左下、右下
border-radius: 5px 5px 5px 5px; //左上、右上、右下、左下

border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;

CSS3盒阴影

box-shadow

可以设置多个下拉阴影的框

语法

box-shadow: h-shadow v-shadow [blur spread color inset];

  • h-shadow : 必须,水平方向偏移距离
  • v-shadow : 必须,垂直方向偏移距离
  • blur : 可选,模糊距离
  • spread : 可选,扩展距离
  • color : 可选,阴影颜色
  • inset : 可选,外阴影/内阴影

兼容性

IE9+, Firefox4+, Safari5+

1
2
3
4
5
.box{ box-shadow: 10px 10px; }
.box{ box-shadow: 10px 10px black; }
.box{ box-shadow: 50px 50px 5px black; }
.box{ box-shadow: 50px 50px 50px 5px black; }
.box{ box-shadow: 10px 10px 50px 20px pink inset; }

CSS3边界图片

border-image

使用border-image-*来构建美丽的可扩展按钮

语法

border-image: source slice width outset repeat;

  • source : 边框图片路径
  • slice : 图像边框向内偏移
  • width : 图像边框的宽度
  • outset : 边框图像区域超出边框的量
  • repeat : 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)

    五个值:stretch(默认) | round | repeat | initial | inherit

兼容性

IE和Opera不兼容, Firefox, Safari6+, Chrome兼容

1
2
.box{ border-image:url(border.png) 30 30 round; }
.box{ border-image:url(border.png) 30 30 stretch; }
文章目录
  1. 1. CSS3圆角
  2. 2. CSS3盒阴影
  3. 3. CSS3边界图片
|