深入理解css3背景图边框

border-image知识点

重点理解 border-image-slice 设置的值将边框背景图分为9份,图像中间的舍弃,其他部分图像对应边框的相应区域放置,上右下左四角固定,border-image-repeat设置的是除四角外其他部分的显示方式。

截图来自菜鸟教程:CSS3 border-image-slice 属性 | 菜鸟教程

目标:做如下边框效果图

边框背景原图

背景图像大小 81*81

依据 border-image-slice: 30; 将图像分为9部分,四角红色块放在边框对应的四角。

黄色块依据 border-image-repeat: round; 图像缩放平铺。

示例代码

html 复制代码
<!DOCTYPE >
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
    />
    <title>把边框玩出花</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      div.container {
        border: 1px solid darkcyan;
        margin: 20px;
        /* box-sizing: border-box; */
      }
      div.test {
        /* border: 15px solid transparent; */
        border: 15px solid red;
        padding: 0;
        border-image-source: url(img/border.png);
        /* border-image -width属性指定图像边界的宽度。如果指定了auto,宽度是相应的image slice的内在宽度或高度 */
        /* 百分比:边界图像区域的大小:横向偏移的宽度的面积,垂直偏移的高度的面积 */
        /* border-image-width: 100%; */
        /* border-image-width: 30%; */
        /* number:表示相应的border-width的倍数。 */
        /* border-image-width: 1; */
        border-image-width: 2;
        /* border-image -slice属性指定图像的边界向内偏移。百分比:图像的大小是相对的:水平偏移图像的宽度,垂直偏移图像的高度。默认值100%。fill:保留图像的中间部分 */
        /* number:表示图像的像素(位图图像)或向量的坐标(如果图像是矢量图像)。 */
        border-image-slice: 30;
        border-image-repeat: round;
        /* border-image-outset用于指定在边框外部绘制 border-image-area 的量.number代表相应的 border-width 的倍数 */
        /* length设置边框图像与边框(border-image)的距离,默认为0。 */
        /* border-image-outset: 10px 5px 2px 5px; */
      }
      div.test > p {
        margin: 20px;
        padding: 20px;
        border: 1px dashed darkgoldenrod;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="test">
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate
          in voluptatum sunt quae, animi explicabo illo dolore doloribus ea
          fugit accusantium similique. Illo sint ipsam numquam ex doloribus in
          quam!
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero,
          excepturi? Quae repellat aspernatur exercitationem quibusdam, minus
          veritatis accusamus! Molestiae ducimus voluptatum assumenda
          repellendus quasi dicta in culpa, quod iusto cupiditate.
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus
          cupiditate, consectetur aliquid officia quidem eligendi repellendus,
          provident libero deleniti suscipit quod quam velit tenetur
          exercitationem reiciendis qui temporibus ad. Consequuntur?
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis
          nesciunt voluptates quibusdam laboriosam, quod consequatur recusandae
          eum nostrum corrupti sequi expedita saepe soluta sapiente velit est
          deserunt enim, cupiditate ex!
        </p>
      </div>
    </div>
    <script></script>
  </body>
</html>
相关推荐
qq_3901617714 分钟前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test43 分钟前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.1 小时前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家2 小时前
Vue 计算属性和监听器
前端·javascript·vue.js