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>
相关推荐
黑客老陈40 分钟前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
运维·服务器·前端·网络·安全·web3·xss
正小安1 小时前
Vite系列课程 | 11. Vite 配置文件中 CSS 配置(Modules 模块化篇)
前端·vite
暴富的Tdy1 小时前
【CryptoJS库AES加密】
前端·javascript·vue.js
neeef_se1 小时前
Vue中使用a标签下载静态资源文件(比如excel、pdf等),纯前端操作
前端·vue.js·excel
m0_748235611 小时前
web 渗透学习指南——初学者防入狱篇
前端
℘团子এ1 小时前
js和html中,将Excel文件渲染在页面上
javascript·html·excel
z千鑫1 小时前
【前端】入门指南:Vue中使用Node.js进行数据库CRUD操作的详细步骤
前端·vue.js·node.js
m0_748250742 小时前
Web入门常用标签、属性、属性值
前端