CSS 实用样式记录

2022-01-02 19:03:15 阅读：181 来源： 互联网

标签：文字 background 样式 text 实用 color 2F% 2Fpic 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS 实用样式记录

文字镂空效果