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>
相关推荐
L耀早睡3 分钟前
mapreduce打包运行
大数据·前端·spark·mapreduce
咖啡の猫5 分钟前
JavaScript基础-创建对象的三种方式
开发语言·javascript·ecmascript
HouGISer16 分钟前
副业小程序YUERGS,从开发到变现
前端·小程序
outstanding木槿22 分钟前
react中安装依赖时的问题 【集合】
前端·javascript·react.js·node.js
小吕学编程1 小时前
Jackson使用详解
java·javascript·数据库·json
霸王蟹1 小时前
React中useState中更新是同步的还是异步的?
前端·javascript·笔记·学习·react.js·前端框架
霸王蟹1 小时前
React Hooks 必须在组件最顶层调用的原因解析
前端·javascript·笔记·学习·react.js
专注VB编程开发20年1 小时前
asp.net IHttpHandler 对分块传输编码的支持,IIs web服务器后端技术
服务器·前端·asp.net
爱分享的程序员2 小时前
全栈项目搭建指南:Nuxt.js + Node.js + MongoDB
前端
听吉米讲故事2 小时前
Slidev集成Chart.js:专业数据可视化演示文稿优化指南
javascript·信息可视化·数据分析