自学内容网 自学内容网

css 使用图片作为元素边框

先看原始图片

再看效果

边框的四个角灭有拉伸变形,但是图片的中部是拉伸的

代码

border-style: solid;

/* 设置边框图像的来源 */
  border-image-source: url('/static/images/mmwz/index/bk_hd@3x.png');

  /* 设置如何切割图像 */
  border-image-slice: 66;

  /* 设置边框的宽度 */
  border-image-width: 26px;

  /* 设置图像如何在边框区域内重复 */
  border-image-repeat: stretch;

也可以简写为

border-image: url('/static/images/mmwz/index/bk_hd@3x.png') 66/26px stretch;
border-style: solid;

也可以使用border-width调整边框宽度,以布局内容

border-width: 11px;


原文地址:https://blog.csdn.net/qq_31683775/article/details/143857005

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!