当前位置：首页 > news >正文

【Java Web学习 | 第五篇】CSS(4) -盒子模型

news 2025/11/4 9:19:21

🌈 个人主页: Hygge_Code

🔥 热门专栏:从0开始学习Java | Linux学习| 计算机网络

💫 个人格言: “既然选择了远方，便不顾风雨兼程”

在这里插入图片描述

文章目录

CSS盒子模型🥝
- 1. 什么是CSS盒子模型？
- 2. 边框（border）：盒子的"外衣"🍋‍🟩
- - 边框的基本属性
  - 单边边框设置
  - 边框对盒子大小的影响
  - 表格细线边框
- 3. 内边距（padding）：内容与边框的缓冲带🍋‍🟩
- - 内边距的基本用法
  - 内边距对盒子大小的影响
  - 内边距的实用技巧
  - 内边距不影响盒子大小的特殊情况
- 4. 外边距（margin）：盒子之间的距离🍋‍🟩
- - 外边距的基本用法
  - 外边距的典型应用：水平居中
  - 外边距合并问题
- 清除默认内外边距🐦‍🔥
- 综合代码演示
CSS美化三剑客：圆角边框、盒子阴影与文字阴影🥝
- 1. 圆角边框（border-radius）：告别生硬直角🍋‍🟩
- - 核心语法：圆角的本质
  - 实战案例：从矩形到圆形
  - 实用技巧
- 2. 盒子阴影（box-shadow）：给元素添加立体感🍋‍🟩
- - 语法解析
  - 实战案例：交互增强效果
  - 注意事项
- 3. 文字阴影（text-shadow）：让文字更有质感🍋‍🟩
- - 语法解析
  - 实战案例：突出标题文字
  - 创意用法
- 4. 综合实战：打造精致卡片组件👏
- 综合代码演示
学习资源推荐🐦‍🔥

CSS盒子模型🥝

在网页布局的世界里，CSS盒子模型是一切布局的基础。无论是简单的文本段落还是复杂的页面组件，都可以被看作是一个个矩形的"盒子"。掌握盒子模型的工作原理，是成为前端开发者的必备技能。本文将从基础概念出发，通过实例代码详细解析盒子模型的核心要素及实战技巧。

1. 什么是CSS盒子模型？

CSS盒子模型是一种将HTML元素视为矩形盒子的布局模型，每个盒子由四个部分组成：

内容区（content）：元素实际内容所在的区域
内边距（padding）：内容区与边框之间的空间
边框（border）：围绕内边距和内容区的线条
外边距（margin）：盒子与其他盒子之间的空间

这四个部分共同决定了元素在页面中的大小和位置，是页面布局的三大核心之一（另外两个是浮动和定位）。

2. 边框（border）：盒子的"外衣"🍋‍🟩

边框是盒子最外层的可见边界，由三个属性共同定义：宽度、样式和颜色。

边框的基本属性

#div1 {width: 300px;height: 200px;border-width: 10px;      /* 边框宽度 */border-style: solid;    /* 边框样式 */border-color: pink;     /* 边框颜色 */
}

也可以使用简写形式，顺序可以任意调整：

#div1 {border: 10px solid pink;  /* 宽度 样式 颜色 */
}

边框样式是必须指定的属性，常用值包括：

solid：实线边框
dashed：虚线边框
dotted：点线边框

单边边框设置

我们可以单独设置盒子四个方向的边框，利用CSS的层叠性可以简化代码：

#div2 {width: 200px;height: 200px;border: 5px solid blue;  /* 先设置四边为蓝色 */border-top: 5px solid red; /* 再单独设置上边框为红色 */
}

边框对盒子大小的影响

重要提示：边框会增加盒子的实际大小。例如，一个宽度为100px的盒子，如果设置了5px的边框，其实际宽度将变为110px（100 + 5×2）。

解决方案：

测量盒子时不包含边框
如果测量包含边框，需从width/height中减去边框宽度的两倍

表格细线边框

表格边框默认会有重叠问题，使用border-collapse: collapse可以合并相邻边框：

table, td, th {border: 1px solid pink;border-collapse: collapse; /* 合并相邻边框 */
}

3. 内边距（padding）：内容与边框的缓冲带🍋‍🟩

内边距用于控制内容区与边框之间的距离，让内容不会紧贴边框。

内边距的基本用法

内边距有四个方向的属性：

padding-top：上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距

也可以使用简写形式，规则如下：

.div3 {/* 1个值：上下左右都为5px *//* padding: 5px; *//* 2个值：上下5px，左右10px *//* padding: 5px 10px; *//* 3个值：上5px，左右10px，下20px *//* padding: 5px 10px 20px; *//* 4个值：上5px，右10px，下20px，左30px（顺时针方向） */padding: 5px 10px 20px 30px;
}

内边距对盒子大小的影响

与边框类似，指定了宽高的盒子设置内边距会使盒子变大。例如，一个200×200px的盒子，设置10px内边距后，实际大小会变为220×220px。

解决方案：如果需要保持盒子总大小不变，应从width/height中减去内边距的总和。

内边距的实用技巧

当导航栏中每个菜单项的字数不同时，使用内边距代替固定宽度可以实现更灵活的布局：

#nav {height: 41px;line-height: 41px; /* 垂直居中 */background-color: #fcfcfc;
}#nav a {display: inline-block;padding: 0 20px; /* 左右内边距撑开盒子 */text-decoration: none;
}

这种方式能保证每个菜单项的内容与边缘距离一致，且能自适应内容长度。

内边距不影响盒子大小的特殊情况

如果盒子没有指定width/height属性，设置内边距不会撑开盒子大小：

.div5 {width: 300px;height: 100px;background-color: pink;
}.div5 p {padding: 50px; /* p元素没有指定宽高，不会超出父元素 */
}

4. 外边距（margin）：盒子之间的距离🍋‍🟩

外边距控制盒子与其他盒子之间的距离，其语法与内边距类似。

外边距的基本用法

外边距同样有四个方向的属性：

margin-top：上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：左外边距

简写规则与padding完全一致，这里不再赘述。

外边距的典型应用：水平居中

外边距最常用的技巧之一是实现块级元素的水平居中，需要满足两个条件：

盒子必须指定宽度（width）
左右外边距都设置为auto

.header {width: 500px;height: 200px;background-color: skyblue;margin: 100px auto; /* 上下100px，左右自动居中 */
}

对于行内元素或行内块元素，水平居中需要给其父元素设置text-align: center。

外边距合并问题

使用margin定义垂直方向的外边距时，可能会出现外边距合并的现象 --> 当父元素没有设置 “阻隔”（如边框、内边距、overflow 等）时，父元素的margin-top会与子元素的margin-top合并，表现为：

父元素会 “吸收” 子元素的上外边距，两者的外边距合并为一个（取较大值）。
视觉上，子元素的上外边距 “转移” 到了父元素身上，导致父元素跟着子元素一起向下移动（看起来像 “塌陷”）。

例如：

#father {width: 400px;height: 400px;background-color: purple;margin-top: 50px;
}#son {width: 200px;height: 200px;background-color: pink;margin-top: 100px; /* 会导致父元素一起下移 */
}

显示效果【本来子元素按照margin-top:100px 应该从父元素的上顶部分开，但实际并没有，而是父元素跟者子元素一起下来了(塌陷)】：
在这里插入图片描述

解决方法：

为父元素定义上边框（可设为透明）border: 1px solid transparent;
为父元素定义上内边距 padding: 1px;
为父元素添加overflow: hidden（推荐，不改变盒子大小）

#father {/* 其他样式不变 */overflow: hidden; /* 解决外边距塌陷 */
}

显示效果：
在这里插入图片描述

清除默认内外边距🐦‍🔥

网页中很多元素（如ul、p等）会自带默认的内外边距，且不同浏览器表现不一致。因此，布局前通常会先清除这些默认样式：

* {padding: 0; /* 清除内边距 */margin: 0;  /* 清除外边距 */
}

注意：行内元素为了兼容性，建议只设置左右方向的内外边距，上下方向可能不起作用（转换为块级或行内块元素后可正常使用）。

综合代码演示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型</title><!-- 页面布局三大核心：盒子模型、浮动、定位 --><!--    谓盒子模型：就是把HTML页面中的布局元素看做是一个矩形的盒子，也就是一个盛装内容的容器CSS盒子模型本质上是一个盒子，封装周围的HTML元素,包括：边框、外边距、内边距和实际内容--><style>/* 注意，这句话应为我们使用CSS时的第一句话* {padding: 0; 清除内边距 margin: 0;  清除外边距} *//*  <!-- 111.border --><!-- border可以设置元素的边框，边框由三部分组成：边框宽度(粗细)、边框样式、边框颜色border: border-width | border-style | border-color; 边框属性简写(复合写法)：border-width border-style border-color;(没有顺序要求)--> */#div1 {width: 300px;height: 200px;/* 1.border-width 边框的粗细，一般情况下都用 px */border-width: 10px;/* 2.border-style 边框的样式 solid(实现边框) dashed(虚线边框) dotted(点线边框) */border-style: solid;/* 3.border-color */border-color: pink;/* 4.边框的简写 *//* border: 10px solid pink; */}/* 5.边框分开写法： border-top/left/right/bottom: 5px solid red *//* 注意：11.边框会额外增加盒子的实际大小,比如 width:100px的盒子,若有border: 5px solid red ，则盒子的实际宽度为100+2*5解决方案：1. 测量盒子的时候不要量边框2. 如果测量的时候包含了边框,则需要width/height减去边框宽度*2(若两边都有边框)*/#div2 {width: 200px;height: 200px;/* 给定一个200*200的盒子,设置上边框为红色,其余边为蓝色 *//* border-top: 5px solid red;border-bottom: 5px solid blue;border-left: 5px solid blue;border-right: 5px solid blue; *//* 这种写法更好，合理运用层叠性(就近原则) */border: 5px solid blue;border-top: 5px solid red;}/* 6.表格细线边框 (边框与边框之间会有像素融合问题,5px+5px=10px)*//* 解决：border-collapse: collapse(合并) 相邻边框合并在一起*/table {width: 500px;height: 250px;text-align: center;}table,td,th {border: 1px solid pink;/* 合并相邻的边框 */border-collapse: collapse;}/* 7.内边距 padding 盒子里面的内容默认适合盒子的边缘紧挨着的，这时就需要padding来进行调节11.padding 属性用于设置内边距，即边框和内容之间的距离1.padding-left 左内边距2.padding-right 右内边距3.padding-top 上内边距4.padding-bottom 下内边距22.padding复合写法(简写)1.padding: 5px;  1个值，代表上下左右都有5像素内边距2.padding: 5px 10px; 2个值，代表上下内边是5像素，左右内边距是10像素3.padding: 5px 10px 20px; 3个值，代表上内边距是5像素，左右内边距是10像素，下内边距是20像素4.padding: 5px 10px 20px 30px; 4个值，上是5像素，右10像素，下20像素，左30像素 顺时针(上右下左)33.padding会影响盒子的实际大小，也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子解决方案：如果要保证盒子跟效果图大小一致，则让width/height减去多出来的内边距大小即可(注意两边的内边距都要考虑进去)*/.div3 {width: 200px;height: 200px;background-color: pink;/* 在浏览器右键点击检查，把鼠标移动到对应的位置，内边距部分会变为跟背景不一样的颜色 *//* padding-left: 5px;padding-top: 5px;padding-right: 5px;padding-bottom: 5px; *//* 内边距简写 *//* padding: 5px; *//* padding: 5px 10px; *//* padding: 5px 10px 20px; */padding: 5px 10px 20px 30px;}/* 7.1 内边距的应用：当网页中每个导航栏(盒子)里面的字数不一样多时，我们就不要统一给每一个盒子设定宽度了直接用padding撑开盒子，就可以实现即使内容长度不一样，内容与盒子之间的边距也一样*/#nav {height: 41px;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;background-color: #fcfcfc;/* 运用了继承 a继承来自div的行高 */line-height: 41px;}#nav a {/* height: 41px; 由于a属于行内元素，这样设置无效，此时必须要转换 行内元素->行内块元素(不能装换成块级元素，因为其无法一行显示多个) */display: inline-block;height: 41px;padding: 0 20px;font-size: 15px;color: #4c4c4c;text-decoration: none;}/* 伪类选择器 */#nav a:hover {background-color: #eee;color: #ff8500;}/* 7.2 padding不会影响盒子大小的情况如果盒子本身没有指定width/height属性，则此时padding就不会撑开盒子大小(对应没有设置的属性)总结：孩子有边框，孩子变大了，但是父亲不受影响，也就是父盒子里面的子盒子会受内边框影响，但是父盒子不会发生变化*/.div5 {width: 300px;height: 100px;background-color: pink;}.div5 p {/* p的width不会变成300+30*2=360px，在自身width没有指定的情况下，不会超出父亲的范围 *//* width: 100%; */padding:30px;}/* 8. 外边距(margin) 控制盒子和盒子之间的距离属性：  1.margin-left 左外边距2.margin-right 右外边距3.margin-top 上外边距4.margin-bottom 下外边距注意：margin简写方式代表的意义和padding完全一致*/.div6 {height: 200px;width: 100px;background-color: pink;}/* #one {margin-bottom: 20px;} */#two {margin-top: 20px;margin-left: 20px;margin-bottom: 50px;}/* 8.1 外边距的典型应用外边距可以让块级盒子水平居中(盒子默认左侧对齐)，但是必须满足两个条件：1.盒子必须指定了宽度(width),否则它就跟浏览器/父盒子一样宽了2.盒子左右的外边距都设置为 auto以下三种写法都可以：1.margin-left: auto; margin-right: auto;2.margin: auto; (上下左右都auto了)3.(常用)margin: 0px auto; (上下外边距为0px 左右auto)注意：以上方法是让块级元素居中，行内元素或者行内块元素水平居中给其 父元素 添加 text-align: center; 即可*/.header {width: 500px;height: 200px;background-color: skyblue;/* 简写法：上下外边距为100px，左右外边距auto实现块级元素自动水平居中 */margin: 100px auto;/* text-align: center 使行内元素和行内块元素(img)都会居中对齐 */text-align: center;}#span1 {margin: 0 auto;/* margin: 0 auto;  不起效果，其只对块级元素起作用给其父元素添加 text-align: center才对*/}/* 8.2  使用margin定义块元素的垂直外边距时，可能会出现外边距的合并嵌套块元素垂直外边距的塌陷(父盒子跟者子盒子一起塌下来了)：对于两个嵌套关系(父子关系)的块级元素，父元素有上边距同时子元素也有上边距，此时父元素会塌陷较大的外边距值解决方案：1.可以为父元素定义上边框2.可以为父元素定义上内边框3.可以为父元素添加 overflow: hidden */#father {width: 400px;height: 400px;background-color: purple;margin-top: 50px;/* 父元素塌陷解决 *//* 1.  transparent(透明)*//* border: 1px solid transparent; *//* 2. *//* padding: 1px; *//* 3. 最好，不会改变盒子的大小，上面两种都有影响*/overflow: hidden;/* 4.还有其他方法，比如 浮动、固定、绝对定位 这些的盒子不会有塌陷问题 */}#son {width: 200px;height: 200px;background-color: pink;/* 本来子元素按照margin-top:100px 应该从父元素的上顶部分开，但实际并没有，而是父元素跟者子元素一起下来了(塌陷) */margin-top: 100px;}/* 9. 内外边距的清除  *//*  网页很多元素都会自带默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，要先清除网页元素的内外边距 *{padding: 0; 清除内边距margin: 0; 清除外边距}！注意：  行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距(即使设置也不起效果)。但是转换为块级元素和行内元素就可以*//* ！ 这句话也是我们CSS的第一行代码  ！*/* {padding: 0;margin: 0;}#span2 {background-color: pink;margin: 20px;}</style>
</head><body><!-- 测试边框各属性 --><div id="div1"></div><br /><!-- 测试边框分开写法 --><div id="div2"></div><!-- 测试表格细线边框 --><table align="center" border="1" cellpadding="0" cellspacing="0"><thead> <!--注意不要把<thead>和<th>搞混 前一个是表结构标签，使表格层次看着更清晰，而后者是类似加粗版的<td>--><tr><th>排名</th><th>关键词</th><th>趋势</th><th>进入搜索</th><th>最近七日</th><th>相关链接</th></tr></thead><tbody><tr><td>1</td><td>鬼吹灯</td><td><img src="picture/down.jpeg" /></td><td>345</td><td>123</td><td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr><tr><td>2</td><td>盗墓笔记</td><td><img src="picture/down.jpeg" /></td><td>124</td><td>123421</td><td><a href="#" target="_blank">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr><tr><td>3</td><td>西游记</td><td><img src="picture/up.jpeg" /></td><td>212</td><td>3213</td><td><a href="#" target="_blank">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr><tr><td>4</td><td>甄嬛传</td><td><img src="picture/up.jpeg" /></td><td>2343</td><td>243343</td><td><a href="#" target="_blank">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr></tbody></table><!-- 盒子模型内边距测试 --><div class="div3">这是盒子模型的内边距测试 天王盖地虎，宝塔镇河妖妖怪阿斯蒂芬哈喽</div><!-- 内边距的应用 --><div id="nav"><a href="">新浪微博</a><a href="">手机新浪网</a><a href="">移动客户端</a><a href="">微博</a><a href="">交友网</a></div><!-- 测试padding不会影响盒子大小的情况 --><div class="div5"><p></p></div>换行<br><!-- 测试盒子模型之外边距 --><div class="div6" id="one"></div><div class="div6" id="two"></div><!-- 外边距的应用 --><div class="header"><span id="span1">里面的文字，为行内元素</span><img src="picture/up.jpeg" /></div><br><!-- 外边距的合并 --><div id="father"><div id="son"></div></div><br /><!-- 内外边距的清除 --><!-- 网页很多元素都会自带默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，要先清除网页元素的内外边距-->12345<ul><li>你好</li></ul><span id="span2">行内元素尽量只设置左右的内外边距</span>
</body></html>

显示效果：
在这里插入图片描述

CSS美化三剑客：圆角边框、盒子阴影与文字阴影🥝

在网页设计中，细节决定品质。圆角边框、盒子阴影和文字阴影这三个CSS属性，虽然看似简单，却能瞬间提升页面的精致度和立体感。

1. 圆角边框（border-radius）：告别生硬直角🍋‍🟩

默认情况下，HTML元素的边框都是直角的，显得生硬刻板。border-radius属性通过设置"圆角半径"，能让元素边缘呈现平滑的弧形效果，是现代UI设计的基础。

核心语法：圆角的本质

圆角效果的原理是在元素的每个角落绘制一个圆形（或椭圆），圆形与边框的交集形成弧形边缘。border-radius的值就是这个圆形的半径，值越大，圆角越明显。

/* 基础语法 */
selector {border-radius: length; /* 可以是px、%等单位 */
}

实战案例：从矩形到圆形

圆形效果
当元素是正方形时，将border-radius设置为宽度的50%，即可得到完美圆形：

.yuanxing {width: 300px;height: 300px; /* 宽高相等的正方形 */background-color: pink;border-radius: 50%; /* 半径=宽高的一半，形成圆形 */
}

在这里插入图片描述

圆角矩形
对于长方形，将border-radius设置为高度的一半，可得到两侧半圆的胶囊形：

.juxing {width: 300px;height: 100px; /* 高度是宽度的1/3 */background-color: pink;border-radius: 50px; /* 50px = 100px高度的一半 */
}

在这里插入图片描述

自定义不规则圆角
border-radius支持为四个角分别设置不同半径，顺序为左上角→右上角→右下角→左下角（顺时针）：

.radius1 {width: 200px;height: 200px;background-color: pink;/* 单独设置左上角圆角 */border-top-left-radius: 30px;/* 也可简写：border-radius: 10px 20px 30px 40px; */
}

在这里插入图片描述

实用技巧

单位选择：px适合固定尺寸的圆角，%适合响应式设计（随元素大小自动调整）
兼容处理：现代浏览器均支持，但老旧浏览器（如IE8及以下）不支持，需谨慎使用
常见场景：按钮、头像、卡片组件、输入框等需要柔和边缘的元素

2. 盒子阴影（box-shadow）：给元素添加立体感🍋‍🟩

现实世界中，物体总会因为光线产生阴影，box-shadow属性正是通过模拟这种光影效果，让平面的元素产生立体感。

语法解析

selector {box-shadow: h-shadow v-shadow blur spread color inset;
}

各参数含义：

h-shadow：必需，水平阴影位置（正值向右，负值向左）
v-shadow：必需，垂直阴影位置（正值向下，负值向上）
blur：可选，模糊距离（值越大，阴影越模糊）
spread：可选，阴影尺寸（正值扩大阴影，负值缩小）
color：可选，阴影颜色（常用rgba设置半透明）
inset：可选，将外阴影改为内阴影（默认是外阴影，不可写outset）

实战案例：交互增强效果

基础阴影效果
为元素添加轻微阴影，增强层次感：

.shadow1 {width: 200px;height: 200px;background-color: pink;/* 水平11px、垂直17px、模糊14px、半透明黑色阴影 */box-shadow: 11px 17px 14px -4px rgba(0, 0, 0, 0.3);
}

在这里插入图片描述

hover交互阴影
鼠标悬浮时显示阴影，提升交互体验：

.shadow1 {width: 200px;height: 200px;background-color: pink;transition: box-shadow 0.3s; /* 平滑过渡 */
}.shadow1:hover {/* 鼠标经过时显示阴影 */box-shadow: 11px 17px 14px -4px rgba(0, 0, 0, 0.3);
}

注意事项

阴影不占用空间：不会影响其他元素的布局，也不会撑开父容器
多重阴影：用逗号分隔可添加多个阴影，实现复杂效果
性能考量：过多或过大的阴影可能影响页面渲染性能，需适度使用

3. 文字阴影（text-shadow）：让文字更有质感🍋‍🟩

文字作为页面的核心内容，适当的阴影能增强可读性和视觉冲击力。text-shadow的用法与box-shadow类似，但作用对象是文字。

语法解析

selector {text-shadow: h-shadow v-shadow blur color;
}

参数与盒子阴影基本一致，只是没有spread（阴影尺寸）和inset（内阴影）属性。

实战案例：突出标题文字

#character {font-size: 50px;color: orange;font-weight: 700;/* 水平5px、垂直5px、模糊6px、半透明黑色阴影 */text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
}

这段代码会让文字产生轻微的立体感，同时与背景形成更好的区分度。
在这里插入图片描述

创意用法

发光效果：使用与文字同色的阴影，设置较大的模糊值

.glow-text {color: white;text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff00de;
}

立体字效果：叠加多个方向的阴影，模拟光照层次感

4. 综合实战：打造精致卡片组件👏

将三个属性结合使用，能快速提升组件质感。例如一个产品卡片：

.product-card {width: 300px;padding: 20px;background: orange;border-radius: 10px; /* 圆角边框 */box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* 轻微外阴影 */
}.product-card h3 {font-size: 20px;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* 文字阴影 */
}

在这里插入图片描述

这样的卡片会显得精致且有层次，远胜于生硬的直角和扁平效果。

综合代码演示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>圆角边框+盒子阴影+文字阴影</title><style>/* 111.圆角边框  *//* border-radius: length; 设置元素的外边框圆角 radius(圆的半径)，圆与边框的交集形成的圆角效果 参数值可以为 数值 或 百分比 的形式1.如果盒子是个正方形，想要设置为一个圆，把数值修改为高度或宽度的一半即可，或者直接写为50%2.如果盒子是个矩形，设置为高度的一半就可以3.该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角4.每个角分开写：border-top-left-radius、border-top-right-radius(top必须在前面)、border-bottom-right-radius、border-bottom-lef-radius(bottom也要在前面)*//* 圆形  radiu设置为盒子宽度的一半即可*/.yuanxing {width: 300px;height: 300px;background-color: pink;/* border-radius: 150px; *//* 50% 就是宽度和高度的一半 */border-radius: 50%;}/* 圆角矩形 radius设置为盒子高度的一半*/.juxing {width: 300px;height: 100px;background-color: pink;border-radius: 50px;}/* 每个角设置不同的radius */.radius1 {width: 200px;height: 200px;background-color: pink;/* border-radius: 10px 20px 30px 40px; *//* border-radius: 10px 40px; */border-top-left-radius: 30px;}/* 222.盒子阴影  *//* 语法：box-shadow: h-shadow v-shadow blur spread color inseth-shadow 必需。水平阴影的位置，允许负值(数值越大，影子越往右边偏移)v-shadow 必需。垂直阴影的位置，允许负值(数值越大，影子越往下偏移)blur 可选。模糊距离(影子是虚的还是实的,数值越大，影子越模糊)spread 可选。阴影的尺寸color 可选。阴影的颜色inset 可选。将外部阴影(outset)改为内部阴影注意；1.默认是外阴影(outset),但是不可以书写这个单词，否则将导致阴影无效2.盒子阴影不占空间，不会影响其他盒子的排列位置*/.shadow1 {width: 200px;height: 200px;background-color: pink;margin: 100px auto;/* rgba半透明化 *//* box-shadow: 11px 17px 14px -4px rgba(0, 0, 0, 0.3); */}.shadow1:hover {/* 原先盒子没有影子，当鼠标经过盒子时就添加阴影效果 */box-shadow: 11px 17px 14px -4px rgba(0, 0, 0, 0.3);}/* 文字阴影 *//* 语法: text-shadow: h-shadow v-shadow blur color;h-shadow 必需。水平阴影的位置，允许负值v-shadow 必需。竖直阴影的位置，允许负值blur 可选。模糊的距离)color 可选。模糊的颜(数值越大阴影越虚)*/#character {font-size: 50px;color: orange;font-weight: 700;text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);}.glow-text {color: aqua;font-size: 100px;text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px aqua;}.product-card {width: 300px;padding: 20px;background: orange;border-radius: 10px; /* 圆角边框 */box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* 轻微外阴影 */}.product-card h3 {font-size: 20px;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* 文字阴影 */}</style>
</head><body><!-- 圆形的做法  -->圆形<div class="yuanxing"></div><p>分隔</p><!-- 圆角矩形 -->圆角矩形<div class="juxing"></div><p>分隔</p><div class="radius1"></div><p>分隔</p><!-- 盒子阴影测试 --><div class="shadow1"></div><!-- 文字阴影测试 --><div id="character">你是阴影，我是火影</div><div class="glow-text">glow测试</div><div class="product-card"><h3>大夏境内,诸神禁行</h3></div>
</body></html>