background-clip演示

m0_56735463

已于 2022-04-17 11:31:28 修改

阅读量54

点赞数

文章标签： html5

于 2022-04-17 11:28:50 首次发布

本文链接：https://blog.csdn.net/m0_56735463/article/details/124226961

版权

<style>
    p {
        border: .8em darkviolet;
        border-style: double;
        margin: 1em 0;
        padding: 1.4em;
        background: linear-gradient(60deg, red, yellow, red, yellow, red, pink);
        font: 900 1.2em sans-serif;
        text-decoration: underline;
    }
    
    .border-box {
        /* <p class="border-box">背景延伸到边框。</p> */
        background-clip: border-box;
    }
    
    .padding-box {
        /* <p class="padding-box">背景延伸到边框的内部边缘。</p> */
        background-clip: padding-box;
    }
    
    .content-box {
        /* <p class="content-box">背景仅延伸到内容盒的边缘。</p> */
        background-clip: content-box;
    }
    
    .text {
        /* 背景被裁剪为前景文本。 */
        background-clip: text;
        -webkit-background-clip: text;
        color: rgba(0, 0, 0, .2);
    }
</style>

背景延伸到边框。

背景延伸到边框的内部边缘。

背景仅延伸到内容盒的边缘。

背景被裁剪为前景文本。