跟随黑马学前端-13，圆角边框、盒子阴影、文字阴影

第十三天：圆角边框、盒子阴影、文字阴影

如果说你的过程有十个参数的话，你可能漏掉一些了。

学习目标

  • 圆角边框

  • 盒子阴影

  • 文字阴影

注意：在ie9版本以上才支持

圆角边框

在CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变成圆角了

语法：

1
border-radius:length;

radius半径(/'reɪdɪəs/ 圆的半径)原理：（椭）圆与边框的交集形成的圆角效果

image-20221222114423934

  • 参数值可以为数值或者百分比

当我们想要一个圆，我们可以设置一个长和宽相等的div，然后令boder-radius为div高的一半，即可

设置为50%就是宽度和高度的一半

注意盒子如果是长方形的话设置百分比会变成椭圆

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!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>圆角边框</title>
    <style>
        /* div{
            width: 300px;
            height: 150px;
            background-color: pink;
            border-radius: 10px;
        }  */

        .yuanxing{
            width: 100px;
            height: 100px;
            background-color: pink;
            border-radius: 50%;
        }
        .juxing{
            width: 300px;
            height: 100px;
            background-color: pink;
            /* 圆角矩形设置为高度的一半 */
            border-radius: 50px;
        }
    </style>
</head>
<body>
<div class="yuanxing"></div>
<div class="juxing"></div>
</body>
</html>

  • 该属性为一个简写数值，可以跟四个数值，分别代表左上角，右上角，右下角，左下角

  • 该属性还可以设置两个数值，分别表示主（从左上到右下）副（从右上到左下）对角线上的数值

  • 分开写：border-top-left-radius,border-top-right-radius,border-bottom-right-radius,border-bottom-left-radius

盒子阴影

CSS3中添加了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影

语法：

1
box-shadow: h-shadow v-shadow blur spread color inset;
值 描述
h-shadow 必需，水平阴影的位置，允许负值
v-shadow 必需，垂直阴影的位置，允许负值
blur 可选，模糊距离
spread 可选，阴影尺寸
color 可选，阴影颜色，请参阅CSS颜色值
inset 可选，将外部阴影（outset）设置为内部阴影

（horizontal，vertical）

注意：

  • 默认的时外阴影，但是不可以写这个单词outset，否则可能让阴影无效

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

  • 阴影一般为rgba(0,0,0,.3);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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>盒子阴影</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin:100px auto;
        }
        div:hover{
            box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3);
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

文字阴影

在CSS3中，我们可以使用text-shadow属性将阴影应用于文本

语法：

1
text-shadow: h-shadow v-shadow blur color;
值 描述
h-shadow 必需，水平阴影的位置，允许负值
v-shadow 必需，垂直阴影的位置，允许负值
blur 可选，模糊距离
spread 可选，阴影尺寸
color 可选，阴影颜色，请参阅CSS颜色值