Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版） 课件 6.2.4知识点3：CSS3图片边框属性

CSS3属性-设置图片边框样式信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》前端技术开发知识储备边框图片设置1边框图片切片2边框图片宽度3边框图片外偏移5组合属性6边框图片平铺方式401设置边框图片前端技术开发边框图片设置前端技术开发01border-image-source：url(图片路径)设置边框图片源：

仅border-image-source属性无法显示边框图片效果，需要设置边框图片宽度。div{

border-image-source:url(img/border.png);}路径一般使用相对路径前端技术开发02边框图片宽度边框图片宽度设置前端技术开发02设置边框图片宽度：border-image-width：length|%|auto;语法说明：

length设置数值，需要单位，如：20px。%设置百分比，相对于所在元素的长度或宽度进行图片缩放。

auto一般为元素长度或宽度（较小者）的一半。

可取1-4个值，按顺时针方向表示四个方向上的边框宽度。边框图片宽度设置前端技术开发02设置边框图片，同时设置边框图片宽度div{

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

border-image-width:30px;}边框图片只出现在四个角位置，因此设置边框还需要结合图片切片属性。前端技术开发03边框图片切片边框图片切片设置前端技术开发03border-image-slice：number|%|fill;设置边框图片切片：语法说明：

可使用数字1~4个值，类似border属性设置，不要写单位，默认像素。

可使用百分比1~4个值。fill可选项，填充元素内容，类似背景图效果。边框图片切片设置前端技术开发03div{

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

border-image-slice:33%33%;}图片四个角固定为元素的四个角，可设置1-4个值，按顺时针方向（上、右、下、左）切分成9个方格。中间的方格为透明，即不显示。边框图片切片设置前端技术开发03设置图片切片后，不同的边框图片宽度：div{

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

border-image-slice:33%33%;

border-image-width:20px;}宽度：30px宽度：20px前端技术开发04边框图片平铺方式边框图片平铺设置前端技术开发04设置边框图片重复方式：border-image-repeat：stretch|repeat|round;属性值描述repeat取值为repeat时，表示4条边的小方块会不断重复，超出元素部分将会被剪切掉。round取值为round时，表示4条边的小方块会铺满。为了铺满，边框图片会压缩或拉伸。stretch取值为stretch时，表示4条边的小方块会拉伸，边长有多长就拉多长。属性值说明如表所示。边框图片平铺设置前端技术开发04设置图片边框重复：div{

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

border-image-slice:33%33%;

border-image-width:20px;

border-image-repeat:repeat;}srecthroundrepeat前端技术开发05边框图片外偏移边框图片外偏移前端技术开发05设置边框向外偏移：border-image-outset：length|number;div{

width:200px;height:200px;background:#ccc;

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

border-image-slice:33%33%;

border-image-width:20px;border-image-repeat:repeat;

border-image-outset:0px;}向外偏移：0向外偏移：10px前端技术开发06组合属性边框图片组合属性前端技术开发06border-image：url(border.png)30303030/20pxrepeat设置图片路径设置图片切割方式和宽度border-image：图片路径

图片切片方式/宽度

图片平铺方式;