其他分享
首页 > 其他分享> > CSS 实用样式记录

CSS 实用样式记录

作者：互联网

文字镂空效果

<html>
    <body>
            <div>
                <p>
                   文字镂空效果
                </p>
            </div>
    </body>
</html>

HTML

p{
    -webkit-text-stroke: 2px purple;
    /* 文字轮廓线条属性 */
    color:transparent;
    background-color: red;
    font-size: 100px;
    background: center center / 100% auto no-repeat
    url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F1113%2F051R0115229%2F20051Q15229-11-1200.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643683288&t=7e653cbb454e9422435f323b2ce69740');
    -webkit-background-clip: text; 
    /* 背景应用目标为文字 */

}

 

CSS样式

 

 

 

 

 效果图

 

标签：文字,background,样式,text,实用,color,2F%,2Fpic,CSS
来源： https://www.cnblogs.com/timeObserver/p/15757970.html