CSS新增属性（圆角和盒子阴影）

最新推荐文章于 2024-09-15 21:53:51 发布

辛-夷

最新推荐文章于 2024-09-15 21:53:51 发布

阅读量252

点赞数 3

分类专栏： HTML 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_65450681/article/details/140086045

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、圆角

二、盒子阴影

一、圆角

1.介绍圆角顾名思义就是将方形盒子的直角变为圆圆的四个角，最大可以将正方形变为圆形，那么这个属性就是 border-radius。接下来我们就看看这个属性的具体用法。

2.代码展示

下面我们就将以下盒子设置为圆形，将圆角值设置为100%，如果只想要四个角圆一些那么可以设置 border-radius值为15px,这个值可以随意给，按照自己的需求来就可以。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: orange;
            margin: 0 auto;
            border-radius: 100%;
            margin-top: 50px;
       
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

3.运行结果

二、盒子阴影

1.盒子阴影可以让盒子更加有立体感，那么接下来我们来看一下，box-shadow属性的用法。

2.代码展示

在这里我们将上面的圆拿下来再给这个圆添加阴影属性，那么box-shadow属性的值分别是什么呢？我们往下看就好啦！

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: orange;
            margin: 0 auto;
            border-radius: 100%;
            margin-top: 50px;
            box-shadow: 10px 10px 30px 10px rgb(222, 66, 00);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

3.运行结果

博主做的有点丑哈哈哈哈，大家可以自行调整一下，那么属性值我们来看一下分别代表什么：

阴影： box-shadow：h-shadow(水平方向) v-shadow（垂直方向） blur(模糊距离) sprread(阴影大小) color inset（内阴影）