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轴位移模糊半径阴影大小阴影颜色

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

    阴影类型不设置时，默认为外阴影，设置为inset时表示内阴影。

    x轴位移表示阴影在水平方向上的位移，正值表示向右偏移，负值表示向左偏移。

    y轴位移表示阴影在垂直方向上的位移，正值表示向下偏移，负值表示向上偏移。

    模糊半径控制阴影的模糊区域大小，值为0表示阴影不模糊。

    阴影大小控制阴影的大小和范围。9819

关于“CSS3边框模块知识点有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。