首页 前端知识 CSS3:图片边框

CSS3:图片边框

2024-04-05 09:04:13 前端知识 前端哥 333 407 我要收藏

简介

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

注意

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

实例

在这里插入图片描述

<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>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4480.html
标签
评论
发布的文章

java解析超大json文件数据

2024-04-19 21:04:10

头歌-JavaScript基础

2024-04-19 21:04:54

C#Json序列化及反序列化

2024-04-19 21:04:40

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!