CSS3----文本新增样式

2024-02-01 22:04:40

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                width: 300px;
                height: 300px;
                margin: 100px auto;
                background: pink;
                opacity: 0.1;
            }
            #inner{
                width: 100px;
                height: 100px;
                background: deeppink;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="inner">
                inner
            </div>
        </div>
    </body>
</html>

设置文字阴影

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                width: 300px;
                height: 300px;
                margin: 100px auto;
                background: rgba(0,0,0,.5);
                /* 最后的.5是透明度 */
            }
        </style>
    </head>
    <body style="background: url(img/zdy.jpg);">
        <div id="wrap">
        </div>
    </body>
</html>

rgba的使用，注意 background:rgba(0,0,0,.5);最后的.5是透明度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                width: 300px;
                height: 300px;
                margin: 100px auto;
                background: rgba(0,0,0,.1);
                color: #FFFFFF;
                font-size: 30px;
                line-height: 300px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            我是wrap
        </div>
    </body>
</html>

背景透明文字不透明、

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
h1{ 
    font:100px/200px "微软雅黑"; 
    text-align:center; 
    text-shadow: -5px -10px ,5px 10px pink;
    /* text-shadow: ;中的参数  颜色 偏移量 模糊程度*/
}
</style>
</head>
<body>
<h1>尚硅谷</h1>
</body>
</html>

文字阴影　　text-shadow属性，属性值分别是颜色偏移量（-x　-y）模糊程度

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
/* h1{ 
    font:100px/200px "微软雅黑"; 
    color: white;
    text-align:center; 
    text-shadow:2px 2px 9px black;
} */
h1{
    font: 100px/200px "微软雅黑";
    text-align: center;
    color: white;
    text-shadow: black 1px 11px 10px;
}
</style>
</head>
<body>
<h1>尚硅谷</h1>
</body>
</html>

设置文字浮雕注意运用text-shadow

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
/* h1{ 
    font:100px/200px "微软雅黑"; 
    text-align:center; 
    color:#000; 
    text-shadow:0 0 0 rgba(0,0,0,1); 
    border:1px solid #000; 
    transition:1s;
}
h1:hover{
    color:rgba(0,0,0,0);
    text-shadow:0 0 100px rgba(0,0,0,0.5);
} */
h1{
    font: 100px/200px "微软雅黑";
    text-align: center;
    color: black;
    transition: 1s;
}
h1:hover{
    color: rgba(0,0,0,0);
    text-shadow: black 0 0 50px;
}

</style>
</head>
<body>
    <h1>尚硅谷</h1>
</body>
</html>

使用伪类hover

码农公寓

相关文章