扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要介绍“CSS3边框模块知识点有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS3边框模块知识点有哪些”文章能帮助大家解决问题。
创新互联公司是专业的新津县网站建设公司，新津县接单;提供成都网站建设、网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行新津县网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
以前我们只能为边框设置纯色和单调的样式，而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的设置效果如下图所示：
下面给出一个圆角示例：
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，我们能够为边框创建非常酷炫的颜色效果，比如下面的代码：
colors:#500#700#900#b00;border-right-colors:#500#700#900#b00;padding: 5px10px;"> HTML5与CSS3之美。
边框图像：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边框模块知识点有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网