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>
相关推荐
嘻嘻嘻嘻嘻嘻ys10 分钟前
《Spring Boot 3 + GraalVM原生镜像实战:云原生时代的毫秒启动与性能调优》
前端·后端
嘻嘻嘻嘻嘻嘻ys13 分钟前
《Spring Boot 3.0×GraalVM:云原生时代的毫秒级启动实战革命》
前端·后端
嘻嘻嘻嘻嘻嘻ys15 分钟前
《Vue 3.4响应式内核优化与WebAssembly性能突破实战指南》
前端·后端
海天胜景17 分钟前
vue3 el-table 右击
javascript·vue.js·elementui
Mercury-circle19 分钟前
JavaScript基础知识合集笔记1——数据类型
开发语言·javascript·笔记
一天睡25小时30 分钟前
前端性能优化面试回答技巧(一)
前端·面试
樊小肆30 分钟前
Vue3 在线 PDF 编辑 2.0 缩放拖拽、渲染优化功能解析
前端·vue.js·开源
程序员韩立30 分钟前
精通 React Hooks:从核心技巧到自定义实践
前端
WEI_Gaot31 分钟前
React Hooks useRef useId
前端·react.js
一天睡25小时32 分钟前
视频HLS分片与关键帧优化深度解析
前端·javascript