详解CSS（九）

🏍️作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

🛵个人主页：亦世凡华、

🛺系列专栏：CSS专栏

🚲给大家推荐一个网站😉很实用😚我一直在上面刷题：点击跳转进入网站注册登录即可刷题

文本阴影

text-shadow：水平阴影、垂直阴影、模糊距离、阴影颜色。

注释：text-shadow属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有俩个或三个长度值和一个可选的颜色值进行规定，省略的长度是0。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            font-size: 35px;
            font-family: "楷体";
            font-weight: bold;
            /* 给文本设置阴影
            text-shadow: 水平阴影 垂直阴影 模糊距离 阴影颜色;
            */
            text-shadow: 3px 6px 6px #CD5C5C;
        }
        .two_box{
            font-size: 50px;
            font-family: "隶书";
            text-shadow: 4px 2px 2px #8B8682,-4px -4px 3px #FF1493;
        }
    </style>
</head>
<body>
    <div class="box">
        我是div类属性是box
    </div>
    <div class="two_box">
        我是div类属性是two_box
    </div>
</body>
</html>

描述：

文字阴影可以有多组值，多组之间用逗号隔开就可以。

水平阴影正值阴影在右边，负值在左边

垂直阴影正值在下边，负值在上边

模糊强度，值越大越模糊

盒子阴影

box-shadow：水平阴影、垂直阴影、模糊距离、阴影尺寸、阴影颜色、内/外阴影；水平阴影和垂直阴影必须写，其余的可以省略不写。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            /* 给这个盒子设置阴影
            语法格式：
            box-sizing:水平方向阴影 垂直方向阴影 阴影清晰度 
            阴影大小 阴影颜色 阴影位置 inset outset(默认值);
            */
            box-shadow: 3px 3px 3px 3px #f00,-4px -4px 2px 2px #DA70D6 inset;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

描述：

盒子阴影可以有多组值，多组之间用逗号隔开就可以

水平阴影正值阴影在右边，负值在左边

垂直阴影正值在下边，负值在上边

模糊强度，值越大越模糊

给图片设置阴影：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            box-shadow: 3px 3px 3px 13px #FFA0A7;
        }
    </style>
</head>
<body>
    <img src="./img.jpg">
</body>
</html>

圆角矩形

border-radius：左上、右上、右下、左下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid #f00;
        }
        /* 使用结构伪类选择器来匹配元素 */
        div:nth-child(1){
            border-radius: 10px 20px 30px 40px;    
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

我们也可以通过div的宽高，设置圆角矩形随意设计自己喜欢的图形

案例一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: #ccc;
        }
        .more{
            width: 60px;
            height: 20px;
            background-color: #fff;
            text-align: center;
            line-height: 20px;
            margin: 100px auto;
            /* 圆角矩形 椭圆形 */
            border-radius: 10px;
            font-size: 12px;
            font-family: '微软雅黑';
        }
        a{
            display: block;
            width: 60px;
            height: 20px;
            border-radius: 10px;
        }
        a:link,a:visited{
            color: #f00;
            text-decoration: none;
        }
        .more a:hover{
            background-color: #FFA500;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="more"><a href="#">更多></a></div>
</body>
</html>

案例二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 500px;
            height: 500px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <img src="./img.jpg">
</body>
</html>

透明度

只要是颜色，都可以用透明度；rgba(红色,绿色,蓝色,透明度)

a：表示透明度的意思透明度取值：0~1之间 0表示完全透明 1表示不透明

背景颜色透明：backgroun-color:rgba(255,255,255,0)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;    
            height: 100px;
            background-color:rgba(255, 0, 0, 0.4);
            position: fixed;
        }
    </style>
</head>
<body>
    <div></div>
    <p>我是p元素</p>
</body>
</html>

文本颜色透明：color:rgba(255,255,255,0.3)

边框颜色透明：border:1px solid rgba(255,255,255,0.5)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            color: rgba(255, 0, 0, 0.4);
            border: 10px solid rgba(0, 0, 0, 0.4);
        }
    </style>
</head>
<body>
    <div class="box">文本颜色设置透明度</div>
</body>
</html>

🍃前端的学习还是要以多练习为主，想要练习HTML的朋友，推荐可以去牛客网看一看，链接：牛客网里面的IT题库内容很丰富，属于国内做的很好的了，最重要的是里面的资源是免费的，是课程+刷题+面经+求职+讨论区分享，一站式求职学习网站，感兴趣的可以去看看。

文本盒子阴影，圆角矩形和透明度今天就讲解到这了，码文不易，大家支持一下吧。

标签：前端 css html

本文转载自: https://blog.csdn.net/qq_53123067/article/details/125808213
版权归原作者 亦世凡华、 所有，如有侵权，请联系我们删除。

文本阴影

盒子阴影

圆角矩形

案例一：

案例二：

透明度

发表评论

“详解CSS（九）”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航