CSS3的内径剪切问题（背景边框是虚线）

原创于 2016-05-25 11:40:32 发布 · 884 阅读

0 ·

CC 4.0 BY-SA版权

响应式专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一种使用CSS实现背景图片裁剪至内容区域的方法，通过设置div元素的宽度、高度、边框样式及背景图片属性，实现了背景图片只在实际内容区域显示的效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        div{
            width: 300px;
            height: 300px;
            border:20px dashed green;
            background: url(img/am.jpg) no-repeat;
            padding:20px;
            background-clip: content-box;
        }
    </style>
</head>
<body>
    <div>我是内容哦</div>
</body>
</html>