HTML / CSS大前端java
CSS 盒子模型详解：边框、内边距与外边距
详细解析了 CSS 盒子模型的核心概念，包括内容区、内边距、边框和外边距的定义及其对元素尺寸的影响。通过实例代码演示了边框样式设置、水平居中布局、外边距合并问题（塌陷）的解决方案。此外，还介绍了圆角边框、盒子阴影和文字阴影等美化属性，帮助开发者构建更精致的页面组件。
详细解析了 CSS 盒子模型的核心概念，包括内容区、内边距、边框和外边距的定义及其对元素尺寸的影响。通过实例代码演示了边框样式设置、水平居中布局、外边距合并问题（塌陷）的解决方案。此外，还介绍了圆角边框、盒子阴影和文字阴影等美化属性，帮助开发者构建更精致的页面组件。
在网页布局的世界里，CSS 盒子模型是一切布局的基础。无论是简单的文本段落还是复杂的页面组件，都可以被看作是一个个矩形的"盒子"。掌握盒子模型的工作原理，是成为前端开发者的必备技能。
CSS 盒子模型是一种将 HTML 元素视为矩形盒子的布局模型，每个盒子由四个部分组成：
这四个部分共同决定了元素在页面中的大小和位置，是页面布局的三大核心之一（另外两个是浮动和定位）。
边框是盒子最外层的可见边界，由三个属性共同定义：宽度、样式和颜色。
#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）。
解决方案：
表格边框默认会有重叠问题，使用 border-collapse: collapse 可以合并相邻边框：
table, td, th {
border: 1px solid pink;
border-collapse: collapse; /* 合并相邻边框 */
}
内边距用于控制内容区与边框之间的距离，让内容不会紧贴边框。
内边距有四个方向的属性：
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 元素没有指定宽高，不会超出父元素 */
}
外边距控制盒子与其他盒子之间的距离，其语法与内边距类似。
外边距同样有四个方向的属性：
margin-top：上外边距margin-right：右外边距margin-bottom：下外边距margin-left：左外边距简写规则与 padding 完全一致，这里不再赘述。
外边距最常用的技巧之一是实现块级元素的水平居中，需要满足两个条件：
.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; /* 清除外边距 */
}
/* 1.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 属性，虽然看似简单，却能瞬间提升页面的精致度和立体感。
默认情况下，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; */
}
现实世界中，物体总会因为光线产生阴影，box-shadow 属性正是通过模拟这种光影效果，让平面的元素产生立体感。
selector {
box-shadow: h-shadow v-shadow blur spread color inset;
}
各参数含义：
h-shadow：必需，水平阴影位置（正值向右，负值向左）v-shadow：必需，垂直阴影位置（正值向下，负值向上）blur：可选，模糊距离（值越大，阴影越模糊）spread：可选，阴影尺寸（正值扩大阴影，负值缩小）color：可选，阴影颜色（常用 rgba 设置半透明）inset：可选，将外阴影改为内阴影（默认是外阴影，不可写 outset）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);
}
基础阴影效果
为元素添加轻微阴影，增强层次感：
.shadow1 {
width: 200px;
height: 200px;
background-color: pink;
/* 水平 11px、垂直 17px、模糊 14px、半透明黑色阴影 */
box-shadow: 11px 17px 14px -4px rgba(0, 0, 0, 0.3);
}
文字作为页面的核心内容，适当的阴影能增强可读性和视觉冲击力。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;
}
将三个属性结合使用，能快速提升组件质感。例如一个产品卡片：
.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 inset */
/* h-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>
显示效果：
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online