13.前端笔记-CSS-盒子样式应用（圆角、阴影）

1、圆角边框

border-radius属性，用于设置元素的外边框圆角
原理：(椭)圆和矩形的两条边相切（圆的半径就是length），形成圆角效果
在这里插入图片描述
属性：

border-top-left-radius;左上
border-top-right-radius:右上
border-bottom-right-radius;右下
border-bottom-left-radius:左下
1
2
3
4

简写形式：border-radius
length1-4代表左上、右上、右下、左下角
只写一个数值就代表，四个角一样

border-radius:length1,length2,length3,length4;
border-radius:length;
border-radius:length1,length2;
1
2
3

参数值：可以是百分比或数值形式

1.2圆角边框的应用

1、画圆

设置length为矩形长（宽）的一半，矩形长=宽（正方形），也可以直接写50%

div{
	width:100px;
	height:100px;
	border-radius:50px;//或者写50%
}
1
2
3
4
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>Documenttitle>
    <style>
        .round{
            width: 100px;
            height: 100px;
            border-radius:50%;
            background-color: green;
        }
    style>
head>
<body>
    <div class="round">round-圆形 div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在这里插入图片描述

2、圆角矩形

设置length为矩形高度的一半

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>Documenttitle>
    <style>
        .round_rectangle{
            width: 100px;
            height: 60px;
            border-radius: 30px;
            background-color: green;
        }
    style>
head>
<body>
    <div class="round_rectangle">圆角矩形div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在这里插入图片描述

3 不同的圆角矩形

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>Documenttitle>
    <style>
        .arbitrary{
            width: 100px;
            height: 100px;
            border-radius:10px 20px 30px 40px;
            background-color:green;
        }
    style>
head>
<body>
    <div class="arbitrary">任意圆角矩形div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在这里插入图片描述或者这样写：

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>Documenttitle>
    <style>
        .arbitrary{
            width: 100px;
            height: 100px;
            /* border-radius:10px 20px 30px 40px; */
            border-top-left-radius:10px;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 30px;
            border-bottom-left-radius: 40px;
            background-color:green;
        }
    style>
head>
<body>
    <div class="arbitrary">任意圆角矩形div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在这里插入图片描述

2.盒子阴影（**）

2.1 阴影介绍

css3新增样式属性，使用box-shadow属性为盒子添加阴影效果

box-shadow:h-shadow v-shadow blur spread color inset
1

值	描述
h-shadow	必须，水平(horizontal)阴影的位置，可以是负值,px
v-shadow	必须，垂直(vertical)阴影的位置，可以是负值,px
blur	可选，模糊距离，影子的虚实,px,如果为负值，就看不到了
spread	可选，阴影的尺寸，影子的大小，px
color	可选，阴影的颜色
inset	可选，将外部阴影改为内部阴影，默认不写就是外阴影

2.2 阴影实际应用

（1）静态影子

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>Documenttitle>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: green;
            box-shadow: 10px 10px 10px 20px rgba(0,0,0,0.2);
            margin: 20px auto;
        }
    style>
head>
<body>
    <div>div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在这里插入图片描述

（2）动态影子
鼠标悬浮到盒子，展示阴影的效果

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>Documenttitle>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: green;
            margin: 20px auto;
        }

        div:hover {
            box-shadow: 10px 10px 10px 20px rgba(0, 0, 0, 0.2) inset;
        }
    style>
head>

<body>
    <div>div>
body>

html>
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

QQ录屏20221130231318

在这里插入图片描述

3、文字阴影

css3中使用text-shadow属性

text-shadow:h-shadow v-shadow blur color;
1

值	描述
h-shadow	必须，水平阴影的位置，允许负值，px
v-shadow	必须，垂直阴影位置，允许负值，px
blur	可选，模糊程度，虚实，px
color	可选，阴影颜色

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>Documenttitle>
    <style>
        div{
            font-size: 30px;
            text-shadow: 10px 10px 20px green;
        }
    style>
head>
<body>
    <div>我是阴影div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在这里插入图片描述

相关阅读:
JavaScript变量提升
 K8S集群实现外部访问（INGRESS）
Codeforces 1605C. Dominant Character
JS-重绘与回流
 2024年sCrypt编程马拉松即将开幕
 数据在内存中的存储（1）——整形
 【单链表】实现链表逆置
 day25-Listener监听器
 taro 兼容支付宝小程序和微信小程序＜七＞-- 上传图片及图片转base64
nodejs+vue考研信息查询系统-计算机毕业设计
原文地址：https://blog.csdn.net/Ambition_ZM/article/details/128122910