前端 CSS 经典：图片边框

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

实现原理：使用 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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/649106.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！