css新增三个样式（十三课）_css中标签环绕展示-优快云博客

本文链接：https://blog.youkuaiyun.com/2302_76722613/article/details/143022516

一、圆角边框

形式：盒子不再是方方正正的了，可以变成圆角的

语法规范：border-radius：length；

例子：

    <style>
        .one {
            background-color: yellowgreen;
            width: 100px;
            height: 100px;
            /* 设置为宽度的一半，且高度宽度相同，也可以用百分数 */
            border-radius: 50%;
        }

        .two {
            background-color: aqua;
            width: 150px;
            height: 36px;
            /* 设置为高度的一半 */
            border-radius: 18px;

        }

        .three {
            background-color: gold;
            width: 100px;
            height: 100px;
            border-radius: 10px 20px 30px 40px;
        }
    </style>
</head>

<body>
    <div class="one">圆形
    </div>
    <div class="two">圆角矩形
    </div>
    <div class="three">不同圆角形</div>
</body>

二、盒子阴影

形式：盒子有阴影样式

语法规范：box-shadow：属性值；

值	描述
h-shadow	必需，水平阴影的位置，必须为负值
v-shadow	必需，垂直阴影的位置，必须为负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选，将外部阴影（ouset）改为内部阴影

ps：①阴影默认为外部阴影，但是不可以写出来，否者整个阴影样式无效

②盒子的阴影不会占空间，不影响其他盒子之间的排列

例子：

    <style>
        div {
            height: 100px;
            width: 100px;
            background-color: cadetblue;
        }

        /* 鼠标放上去显示阴影 */
        div:hover {
            /* box-shadow: 10px 10px inset; */
            box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.3);

        }
    </style>
<body>
    <div></div>
</body>

三、文字阴影

形式：给文字设置阴影

语法规范：text-shadow：属性值；

值	描述
h-shadow	必需，水平阴影的位置，必须为负值
v-shadow	必需，垂直阴影的位置，必须为负值
blur	可选，模糊的距离
color	可选，阴影的颜色

例子：

    <style>
        div {
            width: 500px;
            height: 100px;
            color: chocolate;
            font-size: 25px;
            text-shadow: 10px 10px 6px rgba(0, 0, 0, 0.3);
        }
    </style>
<body>
    <div>
        我是文字，我的身后有阴影
    </div>
</body>