background-clip用法

值	描述
border-box(默认)	背景被裁剪到边框盒。
padding-box	背景被裁剪到内边距框。
content-box	背景被裁剪到内容框。

如下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background-clip用法</title>
    <style>
      .content {
          width: 200px;
          height: 200px;
          padding: 50px;
          background-color: red;
          color: white;
          border: 10px dotted black;
          background-clip: border-box;
      }
    </style>
</head>
<body>
<div class="content">
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</div>
<script type="text/javascript">
  let content = document.getElementsByClassName('content')[0]
  console.log("目前的显示宽度：" + content.clientWidth)
</script>

</body>
</html>

1.属性值为：border-box（背景被裁剪到边框盒）

属性值border-box

2.属性值为：padding-box（背景被裁剪到内边距框）

属性值padding-box

3.属性值为：content-box（背景被裁剪到内容框）

属性值content-box

由此特性可实现一种居中布局，如下图：

全局中

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background-clip用法</title>
    <style>
        .external {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        /*background-clip设置为content-box,将背景被裁剪到内容框，
        再利用padding设为外div减去内div的差的一半*/
        .internal {
            width: 100px;
            height: 100px;
            background-color: black;
            padding: 50px;
            background-clip: content-box;/*居中关键*/
        }
    </style>
</head>
<body>
<div class="external">
    <div class="internal"></div>
</div>
</body>
</html>