CSS3边框与圆角

发表于 | 分类于
本文字数： 1.1k | 阅读时长 ≈ 1 分钟

本篇博客主要讲解CSS3的圆角，盒阴影和边界图片。

liuyifei

CSS3圆角

border-radius属性

此部分内容在博客css效果里面已经介绍过了。

四个值 ：左上角 右上角 右下角 左下角

三个值：左上角 右上角和左下角 右下角

考虑兼容性问题，可以加上前缀。

1
2
3
4
5
6
7
8
9
10
div{
    width: 500px;
    height: 300px;
    border: 1px solid black;
    -webkit-broder-radius: 50%;/*chrome*/
       -moz-broder-radius: 50%;/*firefox*/
    	-ms-broder-radius: 50%;/*IE*/
   		 -o-broder-radius: 50%;/*opera*/
    		broder-radius: 50%;
}

盒阴影 box-shadow

此部分内容在博客css效果里面已经介绍过了。

边界图片 border-image

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

语法：border-image: source slice width outset repeat;

border-image-source: 指定要使用的图像 ;
border-image-slice: 指定图像的边界向内偏移多少;
border-image-width: 指定图像边界的宽度;
border-image-outset: 指定在边框的外部绘制border-image-area的量;
border-image-repeat: 边界是否应重复repeated，拉伸stretched，或铺满rounded;

slice和width是相关联的。个人觉得使用%较好。

1
2
3
4
5
6
7
div{
    border-image-source: url("boder.jpg");
    border-image-slice: number/%/fill;/*10%*/
    border-image-width: number/%/auto;/*auto：自动/自适应*/
    border-image-outset: length/number;
    border-image-repeat: stretch/repeat/round/initial/inherit;/*默认：stretch；inittial：读取默认值；inherit：继承父元素*/
}