CSS3边框模块知识点有哪些

魁首哥

作者

CSS3边框模块知识点有哪些

这篇文章主要介绍“CSS3边框模块知识点有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS3边框模块知识点有哪些”文章能帮助大家解决问题。

以前我们只能为边框设置纯色和单调的样式，而css3为边框提供了许多新的属性以支持更复杂的效果。

CSS3边框模块知识点有哪些

边框圆角：border-radius

边框的圆角属性border-radius是CSS3最常用的属性之一，有了这个属性我们以后不再需要图片资源来实现边框圆角，它的格式如下：

[长度或百分比]{1,4}[/长度或者百分比{1,4}]?

上面的写法是标准的CSS属性值描述语法，类似于常见的正则表达式。{1,4}表示1到4之间（包括1和4）的一个数字，“?”号表示0个或者1个。上面的格式前后用/分隔，第一段可以有1到4个长度或者百分比值，第二段也可以有1到4个长度或者百分比值，但第二段值可以不设置。

例如，下面的形式都是合法的：

25px/20px

25px20px

25px25px/20px

第一段的值定义4个圆角横向的半径，第二段的值定义4个圆角纵向的半径，4个值按照顺序设置top-left、top-right、bottom-right和bottom-left4个圆角。第二段的值不设置时，纵向半径等于横向半径，例如x1x2x3x4和x1x2x3x4/x1x2x3x4的含义一致。

border-radius:x1x2x3x4/y1y2y3y4的设置效果如下图所示：

下面给出一个圆角示例：

<style>

#button{

background-image:linear-gradient(top,#ECF2F6,#83BCF4);

border:1px#5F88B7solid;

border-radius:4px;

padding:8px18px;

font-size:15px;

}

</style>

<inputtype="button"id="button"value="圆角示例"/>

border-radius可分解为4个属性border-top-left-radius、border-top-rightradius、border-bottom-right-radius、border-bottom-left-radius，我们能用这4

个属性来分别设置4个角的圆角。

border-radius有一个非常有趣的功能：实现各种圆形效果。实现一个圆的代码如下：

width:100px;

height:100px;

border-radius:50px;

background-color:#2ec8e9;

实现1/4个圆的代码如下：

width:100px;

height:100px;

border-bottom-left-radius:100px;

background-color:#2ec8e9;

实现1/8个圆的代码如下：

width:0px;

border-left:100pxsolidtransparent;

border-top:100pxsolid#2ec8e9;

border-top-left-radius:100px;

边框颜色：border-color

利用边框颜色属性border-color，我们能够为边框创建非常酷炫的颜色效果，比如下面的代码：

<divstyle="border:10pxsolid#000;border-top-colors:#500#700#900#b00;borderleft-

colors:#500#700#900#b00;border-right-colors:#500#700#900#b00;padding:

5px10px;">

HTML5与CSS3之美。

</div>

边框图像：border-image

边框图像属性让我们能够使用图片来定义边框的样式。它的另外一个作用是可以采用类似于Windows桌面背景的方式来设定边框，用一张小图片来实现一个大的边框效果。

border-image属性可以分解为4个属性，即border-image-source、border-imageslice、border-image-width和border-image-repeat，下面详细介绍一下这4个属性。

1.border-image-source

border-image-source用于指定边框图像的URL地址，这类似于background-url属性。

2.border-image-slice

border-image-slice属性会将图像分成9个格子，按照设置的值对图像进行裁切，如下图所示可以像margin一样，为它设置一个值或多个值。设置一个值时top、right、bottom、left方向的裁切都使用这个值；设置两个值时，top和bottom采用前面一个值，left和right采用后面一个值；设置3个值时，top采用第一个值，left和right采用第二个值，bottom采用第三个值；如果设置4个值，就分别对应top、right、bottom、left这4个方向。

这里可以说明一下，border-image-slice可以按照百分比和像素进行裁切，方式如下图所示：

注意border-image-slice按照像素进行裁切时，其值是没有单位的，比如border-imageslice:17。

3.border-image-width

border-image-width定义边框图像的显示区域，它需要和border-image-slice一起使用，用斜线分隔，其写法为border-image-slice/border-image-width。另外，我们可以使用border-width属性来定义边框的宽度，以下两种格式的效果是完全一样的：

border-image:url(border.png)50/17px;

/*50即border-image-slice的值，17px即border-image-width属性的值*/

和

border-image:url(border.png)50;border-width:17px;

注意和border-image-slice不一样，border-image-width值必须要加上单位，如17px。

4.border-image-repeat

border-image-repeat定义裁剪的top、right、bottom、left图像如何排布，是缩放还是平铺，它有3个值，分别是stretch、repeat和round。stretch是默认值，代表拉伸，repeat代表重复，round代表平铺。repeat和round的区别在于设置为repeat时，可以只显示图像的一部分，而设置为round时，如果长度或者宽度不是图像的整数倍，图像将会拉伸，以保证显示的图像数量是整数。

stretch、repeat、round这3种方式的显示效果如下图所示，请注意repeat和round的细微差别。

注意border-image-repeat的值不能超过2个。当值为两个时，前面一个定义top和bottom边框图像的排布方式，而后一个定义left和right边框图像的排布方式。另外截至成书时，在WebKit内核浏览器（如Chrome和Safari）中，round值尚未实现，其效果和repeat一致。

以上4个属性可以合成为border-image属性。在CSS标准中，采用单个属性或者合成的形式都可以，只是现在许多浏览器并不支持单独属性的形式。以下两种代码的效果完全一样：

border-image-source:url(border.png);

border-image-slice:105;

border-image-width:12px;

border-image-repeat:repeat;

和

border-image:url(border.png)105/12pxrepeat;

好了，通过border-image属性，我们就能通过一副小图片实现自适应的复杂边框效果。

盒阴影：box-shadow

盒阴影属性box-shadow可以为盒子元素设置阴影效果，其格式如下：

box-shadow:阴影类型x轴位移y轴位移模糊半径阴影大小阴影颜色

下面简要介绍一下其中各个参数的作用。