整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
一篇文章中，小海前端（头条号）为小伙伴们介绍了CSS3中新增的border-image属性，该属性主要用于为容器的边框添加图片。本篇文章，继续为大家讲解该属性的用法和CSS3中对该属性的一些细节要求。
尚未阅读上一篇文章的小伙伴请先阅读上一篇文章，上一篇文章讲解了border-image属性及其派生属性的基础用法。
承接文章：为容器的边框添加图片，CSS3新增的边框图片属性，一种新颖的用法
技术等级：中级 | 适合有一定的CSS基础的人士阅读。
该组属性的兼容性暂时还不是特别好，建议大家使用火狐浏览器（Firefox）来尝试该属性的各个效果。
希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。
本篇文章涉及到的CSS3属性问题：
border-image-slice属性的使用细节
border-outset属性的用法
border-image-width属性和border-width属性的区别
border-image属性和border属性的冲突性
各个浏览器内核的兼容性
一、border-image-slice属性的使用细节：
上一篇文章中讲到，border-image-slice是用来设置边框图片的切片属性的。该属性的取值为一个不带单位的数值，默认单位为像素，但是不用书写px。该属性设置的数值可以将边框图片划分为9个区域，并贴到边框的9个不同位置。
这里还以上一篇文章中宽度和高度均为90像素的图片为例，该图片存放在一个名为images的文件夹中，图片的文件名为ball.jpg，图片中每个圆形的直径均为30像素。
素材图 ball.jpg
对于该属性，CSS3对于它的使用方法还有以下几个细节要求：
当切片的上下偏移之和大于等于图像的高度，且左右偏移之和大于等于图像的宽度。则容器只有四个角可以获得边框图片的切片，而容器的边无法获得任何图片。
CSS代码如下所示：
border-image:url(../images/ball.jpg) 60 70 50 30/30px round
上述代码指出，上切片尺寸为60像素，右切片尺寸为70像素，下切片尺寸为50像素，左切片尺寸为30像素。上下切片的偏移之和为110像素，左右切片的偏移之和为100像素，这两个值均超过了图片90像素的宽高尺寸。因此只有容器的四个角可以得到边框图像。最终效果如下图所示：
实体效果图
当切片的上下偏移量都大于等于图像的高度，且左右偏移量都大于等于图像的宽度。则容器的四个角可以获得完整的边框图像。
CSS代码如下所示：
border-image:url(../images/ball.jpg) 90 100 120 130/30px round
上述代码指出，上切片尺寸为90像素，右切片尺寸为100像素，下切片尺寸为120像素，左切片尺寸为130像素。每一个方向的切片偏移量均大于等于图片90像素的宽度和高度值。因此容器的四个角可以获得完整的边框图像。同样，边依然无法得到任何切片图像。
最终效果如下图所示：
实体效果图
border-image-slice属性还有一个可以放在切片数量后面的取值。当具有该取值并设置为“fill”时，边框图片中5号圆形就会显示在容器的内部。如果没有该取值，边框图片中5号圆形就不会显示在容器内部。
CSS代码如下所示：
border-image:url(../images/ball.jpg) 30 fill/30px round
最终效果如下图所示：
实体效果图
二、border-outset属性的用法：
该属性用来对边框图像实现向外扩张的效果。该属性的取值为带有单位的数值。同时该属性也是可以结合border-image属性单独使用的。
CSS代码如下所示：
border-image:url(../images/ball.jpg) 30/30px round
border-outset:30px;
上述代码会让边框图像在显示的同时向外扩张30像素。请小伙伴们自行操作并尝试。
三、border-image-width属性和border-width属性的区别：
border-width属性可以单独使用，适用于设置具有颜色的边框宽度。
border-image-width属性不可以单独使用，必须在border-image属性取值内部固定的位置处使用。该属性主要用于设置具有图像的边框宽度。
这两个属性是可以同时使用的。
当容器内部具备文本内容时，我们发现，文本内容出现在了边框图片的位置处。为了方便小伙伴们观察，我把文本内容调整成了黄色。如下图的左侧部分。
实体效果图
此时调整border-width属性，为了让边框宽度生效，还需要设置边框样式border-style。为了不让容器的大小发生变化，添加box-sizing属性。为了便于查看，我把文本内容调整成了红色。如上图右侧部分。
CSS代码如下所示：
border-image: url(../images/ball.jpg) 30/30px round;
border-width: 30px;
border-style: solid;
box-sizing: border-box;
color:#ff0000;
四、border-image属性和border属性的冲突性：
CSS3规定，带有颜色的边框和边框图片不得同时存在，并且当border-image属性和border属性同时存在时，border-image是不起作用的。
CSS代码如下所示。
border-image:url(../images/ball.jpg) 30/30px round;
border:solid 10px #ff5857;
上述代码执行后，容器会带有10像素的边框，而不带有边框图片。小伙伴们可以自行尝试。
五、各个浏览器内核的兼容性：
CSS3的属性中还有许多都是浏览器不能完全兼容的，有的属性兼容部分浏览器，有的属性被浏览器部分兼容。那么，要对所有的浏览器都得到相同的外观，应该如何处理呢？
可以采用为CSS属性的兼容性前缀来解决这个问题。
-ms-，适用于具有Trident内核的IE系列浏览器。
-webkit-，适用于具有webkit内核的浏览器，例如Safari浏览器、360安全浏览器等。
-moz-，适用于Firefox浏览器。
-o-，适用于Opera浏览器。
因此，border-image属性要实现浏览器全兼容可以使用下列代码：
border-image:url(../images/ball.jpg) 30/30px round
-webkit-border-image:url(../images/ball.jpg) 30/30px round
-moz-border-image:url(../images/ball.jpg) 30/30px round
-o-border-image:url(../images/ball.jpg) 30/30px round
-ms-border-image:url(../images/ball.jpg) 30/30px round
不过通过实际操作，我发现border-image属性即使加上了浏览器兼容性前缀，也不能达到满意的效果。CSS3中还有许多属性都不能达到最满意的兼容性，我们只能等待CSS3完备的计划出台，并尽快得到大部分浏览器厂商的支持和认可。
在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。
希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。
关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。
下一篇文章中，小海前端（头条号）会为小伙伴们讲解CSS3中实现多列布局的属性。这组属性解决了在CSS2时必须要对容器进行浮动才能在一行内显示多列的问题。希望小伙伴们不要错误。
SS3 的边框属性可以给创建圆角的盒子，也可以给盒子设置阴影，用图片美化盒子。
border-radius可以给元素设置圆角。
如下，一个div元素：
<div class="box">border-radius可以给元素设置圆角。</div>
我们给它加一点样式，并设置它的border-radius为15px:
.box{
width: 284px;
height: 28px;
line-height: 28px;
text-align: center;
color: #fff;
font-size: 14px;
background: #999;
border:2px solid #333;
border-radius: 15px;
}
浏览器中查看效果：
border-radius也可以给它四个角分别设置角度，四个值依次代表左上，右上，右下，左下：
border-radius: 15px 15px 0px 0px;
box-shadow可以为元素设置边框阴影。box-shadow设置的属性如下：
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 水平阴影的位置，可以是负值。
v-shadow 垂直阴影的位置，可以是负值。
blur 模糊距离。
spread 阴影的尺寸。
color 阴影的颜色。
inset 将外部阴影 (outset) 改为内部阴影。
以上 h-shadow ，v-shadow是必须要设置的，其他的可以根据需要去设置。
我们给上面的div元素添加阴影：
<div class="box"></div>
css样式：
.box{
width: 284px;
height: 100px;
background: #f60;
box-shadow: 10px 10px 5px #ccc;
}
浏览器中查看效果：
border-image 使用图片设置边框。
如下：
<div class="box"></div>
我们先给div元素的边框颜色设置为透明（transparent），然后在使用图片设置边框：
.box{
width: 284px;
height: 100px;
border:15px solid transparent;
width:300px;
padding:10px 20px;
-webkit-border-image:url(images/border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(images/border.png) 30 30 round; /* Opera */
border-image:url(images/border.png) 30 30 round;
}
看一下效果：
童靴们可能不懂为啥属性的前边会有-webkit-、-o-这样的前缀呢？这是因为好多浏览器都不支持CSS的新特性，所以写这些专属的前缀是为了兼容各浏览器。
上一篇CSS3文章最后也讲过各浏览器的前缀，童靴们自己去看一下。
css3 入门简介 ——css3开课啦！
当你感到悲哀痛苦时，最好是去学些什么东西。学习会使你永远立于不败之地。
关注小白前端，持续收到文章推送！
文素材来自于网络，若与实际情况不相符或存在侵权行为，请联系删除。
在搭建公司网站时，会用到一些边框，无论是表格还是div。布局时，边框可以作为分割线，对内容进行对比或偏移。更明显。使用边框实际上非常简单。一是边框的粗细，二是边框的颜色。您可以设置本地和常规设置，也可以单独设置上下左右四个方向的边框。 CSS中有一个关于颜色的属性：border-color，它一次最多可以接受4个颜色值。
边框颜色值：[<颜色>|透明]{1,4} |继承初始值：未定义速记属性计算值：单个属性（border-top-color，top-border-color）
如果网页设计的边界值少于 4 个，则值复制有效。如果设计者希望H1元素有细的黑色上下边框和粗的灰色左右边框，CSS样式应该这样写：
h1 { 边框样式：实心；边框宽度：细；边框颜色：黑灰色；}
当然，所有 4 个页面都会应用一个颜色值，如果应用 4 个颜色值，那么每个页面都会有不同的颜色。可以使用任何类型的颜色值，例如它可以是命名颜色，或十六进制和 RGB 值：
p {
边框样式：实心；边框宽度：粗；
边框颜色: blackrgb(25%, 25%, 25%) # 808080 银色;}
您还可以使用快捷方式一次定义多个边界，例如为特定段落设置 P：
P {
border:#cecece1pxsolid;//四个边框均为灰色1px
}
还有一些单页边框颜色属性。原理与单页样式和宽度属性相同。网站构建者必须为标题指定纯黑色边框，正确的边框是纯灰色边框。这可以指定如下：
P { 边框样式：实心；边框颜色：黑色；右边框颜色：灰色；}
边界四个方向对应的属性名称：
上边框上颜色、右边框右颜色、下边框下颜色、左边框左颜色
透明边框的使用：在某些情况下，网站作者想要创建不可见的边框。这使得边框颜色值透明（在 CSS2 中引入）。该值用于创建不可见的宽度边框。假设您希望一组 3 个链接具有边框。默认情况下，这些边框是不可见的，但当鼠标悬停在链接上时，边框应升起。您可以通过在链接未悬停时使边框透明来实现此目的：
a:链接,a:访问{
边框样式：实心；边框宽度：5px；边框颜色：透明；}
a:悬停{边框颜色:灰色;}
使用透明时，边框的使用可充当额外的填充，还有一个额外的好处，即在需要时使其可见。此透明边框充当填充，因为元素的背景延伸到边框区域（假设它是可见背景）。
注意：IE7之前，IE/Win不支持透明。在以前的版本中，IE 会根据元素的颜色值设置边框颜色。
免责声明：以上内容资料均来源于网络，本文作者无意针对，影射任何现实国家，政体，组织，种族，个人。相关数据，理论考证于网络资料，以上内容并不代表本文作者赞同文章中的律法，规则，观点，行为以及对相关资料的真实性负责。本文作者就以上或相关所产生的任何问题概不负责，亦不承担任何直接与间接的法律责任。
文章内容如涉及作品内容、版权图片，侵权，谣言或其它问题请联系删除。最后，大家对于这个事件有什么不同的想法，欢迎评论区留言讨论
*请认真填写需求信息，我们会在24小时内与您取得联系。
