CSS3:图片边框

简介

图片也可以作为边框,以下是实例演示

注意

实现该效果必须添加border样式,且必须位于border-image-socure之前否则不会生效

实例

html 复制代码
<html lang="en">
  <head>
    <style>
      p {
        width: 600px;
        margin: 200px auto;
        border: 30px solid;
        //核心代码-------------------
        border-image-source: url(img.jpg);//设置图片来源
        border-image-slice: 30;			  //设置切割大小
        border-image-repeat: round;       //设置填充模式
        //核心代码-------------------
        padding: 35px;
        color: aliceblue;
        box-shadow: 15px 15px 10px #929696;
      }
    </style>
  </head>
  <body>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. A, consectetur? Dignissimos officiis
      iure beatae non ipsum sed temporibus nisi quas. Iste dolorem minus quis. Adipisci
      necessitatibus eligendi illo rerum recusandae. Sed dolore laudantium natus rem ex pariatur,
      laborum officiis esse! Delectus tenetur mollitia alias distinctio temporibus dolore. Corrupti,
      et voluptate? Non est molestias magnam recusandae porro nihil obcaecati nobis rerum. Porro
      quisquam in quis molestias dolores corporis, earum animi voluptatibus! Eligendi alias
      dignissimos at ipsam totam iusto voluptatibus odio dicta. Excepturi cumque voluptatum enim
      aspernatur quo non dolorum minus explicabo. Praesentium necessitatibus nulla cum quaerat
      numquam sed consequuntur culpa sequi.
    </p>
  </body>
</html>
相关推荐
归于尽几秒前
智能前端小魔术,让图片开口说单词
前端·react.js
用户987382458101几秒前
vite 插件
前端
无数山3 分钟前
autorelease pool
前端
支撑前端荣耀3 分钟前
四、Cypress测试框架拆解
前端
杨进军3 分钟前
React 中 root.render 与 unmount 函数的流程
前端·react.js·前端框架
coding随想7 分钟前
JavaScript中的BOM:Window对象全解析
开发语言·javascript·ecmascript
難釋懷8 分钟前
TypeScript-webpack
javascript·webpack·typescript
Rockson12 分钟前
使用Ruby接入实时行情API教程
javascript·python
祝余呀24 分钟前
HTML初学者第三天
前端·html
就爱瞎逛40 分钟前
TailWind CSS Intellisense 插件在VSCode 上不生效
前端·css·vscode·tailwind