前端 CSS 经典：图片边框

yqcoder

已于 2024-05-24 09:44:07 修改

阅读量467

点赞数 1

分类专栏：前端 CSS 经典文章标签：前端 css

于 2024-05-24 09:43:36 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_64684095/article/details/139164761

版权

前端 CSS 经典专栏收录该内容

39 篇文章

订阅专栏

前言：有这么一个业务，需要边框随着图片宽度的变化而变化，比如一些聊天的气泡框等。

实现原理：使用 border-image 属性

效果图：

实现代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>图片边框</title>
    <style>
      body {
        background: #000;
      }
      .text-box {
        color: white;
        text-align: center;
        padding: 5em;
        margin: 200px auto;
        width: 70%;
        border: 50px solid #fff;
        /* 边框图片源 */
        border-image-source: url("border.png");
        /* 切割，四个角 */
        border-image-slice: 50;
        /* 中间部分重复 */
        border-image-repeat: round;
        /* 缩写为 */
        /* border-image: url("border.png") 50 round; */
      }
    </style>
  </head>
  <body>
    <div class="text-box">
      <p>
        撒可见度回复看似简单哈佛考虑江哈斯的风口浪尖和撒旦可立即返回考虑撒旦回复我开始接触可能想看机会疯狂叫啥的库哈斯快递费好看了解撒电话看两家后即可和
      </p>
    </div>
    <script></script>
  </body>
</html>