CSS-三大特性，盒子模型，圆角边框，盒子阴影，文字阴影

一、 CSS 的三大特性

CSS 有三个非常重要的三个特性:层叠性､继承性､优先级｡

1.层叠性

相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式｡层叠性主要解决样式冲突 的问题

层叠性原则:

样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式

样式不冲突,不会层叠

CSS 层叠性口诀:长江后浪推前浪,前浪死在沙滩上｡

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS层叠性</title><style>div {color: red;font-size: 12px;}div {color: pink;}</style>
</head>
<body><div>长江后浪推前浪,前浪死在沙滩上</div>
</body>
</html>

2.继承性

现实中的继承: 我们继承了父亲的姓

CSS中的继承: 子标签会继承父标签的某些样式,如文本颜色和字号｡简单的理解就是:子承父业｡

恰当地使用继承可以简化代码，降低 CSS 样式的复杂性
 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
 继承性口诀：龙生龙，凤生凤，老鼠生的孩子会打洞

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS继承性</title><style>div {color: pink;font-size: 14px;}</style>
</head><body><div><p>龙生龙，凤生凤，老鼠生的孩子会打洞</p></div>
</body></html>

行高的继承性

body { 
font:12px/1.5 Microsoft YaHei;
}

    行高可以跟单位也可以不跟单位
 如果子元素没有设置行高，则会继承父元素的行高为 1.5
 此时子元素的行高是：当前子元素的文字大小 * 1.5
 body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>行高的继承</title><style>body {color: pink;/* font: 12px/24px 'Microsoft YaHei'; */font: 12px/1.5 'Microsoft YaHei';}div {/* 子元素继承了父元素 body 的行高 1.5 *//* 这个1.5 就是当前元素文字大小 font-size 的1.5倍   所以当前div 的行高就是21像素 */font-size: 14px;}p {/* 1.5 * 16 =  24 当前的行高 */font-size: 16px;}/* li 么有手动指定文字大小  则会继承父亲的 文字大小  body 12px 所以 li 的文字大小为 12px 当前li 的行高就是  12 * 1.5  =  18*/</style>
</head><body><div>粉红色的回忆</div><p>粉红色的回忆</p><ul><li>我没有指定文字大小</li></ul>
</body></html>

font: 12px/1.5 'Microsoft YaHei';：这是一个复合属性，用于同时设置字体的多个属性。

12px：设置 body 元素内文本的字体大小为 12 像素。

1.5：设置 body 元素内文本的行高为字体大小的 1.5 倍。这里使用的是相对值，意味着行高会根据实际的字体大小动态计算。

3.优先级

当同一个元素指定多个选择器，就会有优先级的产生。

 选择器相同，则执行层叠性

 选择器不同，则根据选择器权重执行 

选择器权重如下表所示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS优先级</title><style>.test {color: red;}div {color: pink !important;}#demo {color: green;}</style>
</head><body><div class="test" id="demo" style="color: purple">你笑起来真好看</div>
</body></html>

先级注意点:

1. 权重是有4组数字组成,但是不会有进位。

2. 可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推..

3. 等级判断从左向右，如果某一位数值相同，则判断下一位数值。

4. 可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大.

5. 继承的权重是0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

 div ul li ------> 0,0,0,3

 .nav ul li ------> 0,0,1,2

 a:hover -----—> 0,0,1,1

 .nav a ------> 0,0,1,1

二、盒子模型

页面布局要学习三大核心, 盒子模型, 浮动 和 定位. 学习好盒子模型能非常好的帮助我们布局页面.

1.看透网页布局的本质

网页布局过程：

1. 先准备好相关的网页元素，网页元素基本都是盒子 Box 。

2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。

3. 往盒子里面装内容.

网页布局的核心本质： 就是利用 CSS 摆盒子。

2.盒子模型（Box Model）组成

所谓 盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容

⑴. 边框(border)

border可以设置元素的边框｡边框有三部分组成:边框宽度(粗细)  边框样式   边框颜色

语法:

border : border-width || border-style || border-color

边框样式 border-style 可以设置如下值：

 none：没有边框即忽略所有边框的宽度（默认值）

 solid：边框为单实线(最为常用的)  dashed：边框为虚线

 dotted：边框为点线 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>盒子模型之边框</title><style>/* 公共样式，设置盒子的宽度、高度、边框粗细和颜色 */.box {width: 300px;height: 200px;border-width: 5px;border-color: pink;margin-bottom: 20px;/* 为每个盒子添加底部外边距，使它们之间有间隔 */}/* 实线边框样式 */.solid-border {border-style: solid;}/* 虚线边框样式 */.dashed-border {border-style: dashed;}/* 点线边框样式 */.dotted-border {border-style: dotted;}</style>
</head><body><!-- 第一个盒子，实线边框 --><div class="box solid-border"></div><!-- 第二个盒子，虚线边框 --><div class="box dashed-border"></div><!-- 第三个盒子，点线边框 --><div class="box dotted-border"></div>
</body></html>

CSS 边框属性允许你指定一个元素边框的样式和颜色｡

边框简写:

border: 1px solid red; 没有顺序

边框分开写法:

border-top: 1px solid red; /* 只设定上边框, 其余同理 */
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>边框的复合写法</title><style>div {width: 300px;height: 200px;/* border-width: 5px;border-style: solid;border-color: pink; *//* 边框的复合写法 简写:  *//* border: 5px solid pink; *//* 上边框 */border-top: 5px solid pink;/* 下边框 */border-bottom: 10px dashed purple;}</style>
</head><body><div></div>
</body></html>

①表格的细线边框：border-collapse

border-collapse 属性控制浏览器绘制表格边框的方式｡它控制相邻单元格的边框｡

语法:

border-collapse:collapse;

 collapse 单词是合并的意思
 border-collapse: collapse; 表示相邻边框合并在一起
 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>今日小说排行榜</title><style>table {width: 500px;height: 249px;}th {height: 35px;}table,td, th {border: 1px solid pink;/* 合并相邻的边框 */border-collapse: collapse;font-size: 14px;text-align: center;}</style>
</head>
<body><table align="center" cellspacing="0"><thead><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="down.jpg"></td><td>456</td><td>123</td><td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td></tr><tr><td>1</td><td>鬼吹灯</td><td><img src="down.jpg"></td><td>456</td><td>123</td><td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td></tr><tr><td>3</td><td>西游记</td><td><img src="up.jpg"></td><td>456</td><td>123</td><td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td></tr><tr><td>1</td><td>鬼吹灯</td><td><img src="down.jpg"></td><td>456</td><td>123</td><td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td></tr><tr><td>1</td><td>鬼吹灯</td><td><img src="down.jpg"></td><td>456</td><td>123</td><td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td></tr><tr><td>1</td><td>鬼吹灯</td><td><img src="down.jpg"></td><td>456</td><td>123</td><td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td></tr></tbody>           </table>
</body>
</html>

②边框会影响盒子实际大小

边框会额外增加盒子的实际大小。因此我们有两种方案解决:

1. 测量盒子大小的时候,不量边框.

2. 如果测量的时候包含了边框,则需要 width/height 减去边框宽度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>边框会影响盒子的实际大小</title><style>/* 我们需要一个200*200的盒子, 但是这个盒子有10像素的红色边框 */div {width: 180px;height: 180px;background-color: pink;border: 10px solid red;}</style>
</head>
<body><div></div>
</body>
</html>

⑵.内边距(padding)

padding 属性用于设置内边距,即边框与内容之间的距离｡

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>盒子模型之内边距</title><style>div {width: 200px;height: 200px;background-color: pink;padding-left: 20px;padding-top: 30px;}</style>
</head><body><div>盒子内容是content盒子内容是content盒子内容是content盒子内容是content</div>
</body></html>

padding 属性(简写属性)可以有一到四个值｡

以上 4 种情况,我们实际开发都会遇到｡

当我们给盒子指定 padding 值之后，发生了 2 件事情：

1. 内容和边框有了距离，添加了内边距。

2. padding影响了盒子实际大小。

也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

解决方案：

如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>内边距会影响盒子实际大小</title><style>div {width: 160px;height: 160px;background-color: pink;padding: 20px;}</style>
</head><body><div>padding会影响盒子实际大小padding会影响盒子实际大小padding会影响盒子实际大小padding会影响盒子实际大小</div></body></html>

①案例:新浪导航案例-padding影响盒子好处

padding内边距可以撑开盒子,我们可以做非常巧妙的运用.

因为每个导航栏里面的字数不一样多,我们可以不用给每个盒子宽度了,直接给padding最合适.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>新浪导航</title><style>.nav {height: 41px;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;background-color: #fcfcfc;line-height: 41px;}.nav a {/* a属于行内元素 此时必须要转换 行内块元素 */display: inline-block;height: 41px;padding: 0 20px;font-size: 12px;color: #4c4c4c;text-decoration: none;}.nav a:hover {background-color: #eee;color: #ff8500;}</style>
</head>
<body><div class="nav"><a href="#">新浪导航</a><a href="#">手机新浪网</a><a href="#">移动客户端</a><a href="#">微博</a><a href="#">三个字</a></div>
</body>
</html>

②案例:小米导航案例修改-padding影响盒子大小计算

padding内边距可以撑开盒子, 有时候,也会让我们去修改宽度

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>简单版小米侧边栏</title><style>/* 1. 把a转换为块级元素 */a {display: block;width: 200px;height: 40px;background-color: #55585a;font-size: 14px;color: #fff;text-decoration: none;padding-left: 30px;line-height: 40px;}/* 2 鼠标经过链接变换背景颜色 */a:hover {background-color: #ff6700;}</style>
</head><body><a href="#">手机 电话卡</a><a href="#">电视 盒子</a><a href="#">笔记本 平板</a><a href="#">出行 穿戴</a><a href="#">智能 路由器</a><a href="#">健康 儿童</a><a href="#">耳机 音响</a>
</body></html>

③如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小.
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>padding不会影响盒子大小的情况</title><style>h1 {/* width: 100%; */height: 200px;background-color: pink;padding: 30px;}div {width: 300px;height: 100px;background-color: purple;}div p {padding: 30px;background-color: skyblue;}</style>
</head><body><h1></h1><div><p></p></div>
</body></html>

3.外边距(margin)

margin 属性用于设置外边距,即控制盒子和盒子之间的距离｡

margin 简写方式代表的意义跟 padding 完全一致｡

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>盒子模型之外边距margin</title><style>div {width: 200px;height: 200px;background-color: pink;}/* .one {margin-bottom: 20px;} */.two {/* margin-top: 20px; *//* margin: 30px; */margin: 30px 50px;}</style>
</head><body><div class="one">1</div><div class="two">2</div>
</body></html>

⑴外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：

① 盒子必须指定了宽度（width）。

② 盒子左右的外边距都设置为 auto 。

.header{ width:960px; margin:0 auto;} ，

以下三种都可以：

 margin-left: auto; margin-right: auto;

 margin: auto;

 margin: 0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>块级盒子水平居中对齐</title><style>.header {width: 900px;height: 200px;background-color: pink;margin: 100px auto;}</style>
</head><body><div class="header"></div>
</body></html>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>行内元素/行内块元素水平居中对齐</title><style>.header {width: 900px;height: 200px;background-color: pink;margin: 100px auto;text-align: center;}/* 行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可 */</style>
</head><body><div class="header"><span>里面的文字</span></div><div class="header"><img src="down.jpg" alt=""></div>
</body></html>

⑵. 外边距合并

使用 margin 定义块元素的垂直外边距时,可能会出现外边距的合并｡

主要有两种情况:

1. 相邻块元素垂直外边距的合并

2. 嵌套块元素垂直外边距的塌陷 

①相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有 上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的 较大者这种现象被称为相邻块元素垂直外边距的合并。

解决方案：

尽量只给一个盒子添加 margin 值。

②嵌套块元素垂直外边距的塌陷

对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值｡

解决方案：

① 可以为父元素定义上边框。

② 可以为父元素定义上内边距。

③ 可以为父元素添加 overflow:hidden。

还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题，后面咱们再总结。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>外边距合并-嵌套块级元素垂直外边距塌陷</title><style>.father {width: 400px;height: 400px;background-color: purple;margin-top: 50px;/* border: 1px solid red; *//* border: 1px solid transparent; *//* padding: 1px; */overflow: hidden;}.son {width: 200px;height: 200px;background-color: pink;margin-top: 100px;}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>

⑶.清除内外边距

网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致｡因此我们在布局前,首先要清除下网 页元素的内外边距｡

{
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"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>清除内外边距</title><style>/* 这句话也是我们css 的第一行代码 */* {margin: 0;padding: 0;}span {background-color: pink;margin: 20px;}</style>
</head><body>123<ul><li>abcd</li></ul><span>行内元素尽量只设置左右的内外边距</span>
</body></html>

三、综合案例

案例1:产品模块

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>综合案例-产品模块</title><style>* {margin: 0;padding: 0;}body {background-color: #f5f5f5;}a {color: #333;text-decoration: none;}.box {width: 298px;height: 415px;background-color: #fff;/* 让块级的盒子水平居中对齐 */margin: 100px auto;}.box img {/* 图片的宽度和父亲一样宽 */width: 100%;}.review {height: 70px;font-size: 14px;/* 因为这个段落没有 width属性 所有 padding不会撑开盒子的宽度 */padding: 0 28px;margin-top: 30px;}.appraise {font-size: 12px;color: #b0b0b0;margin-top: 20px;padding: 0 28px;}.info {font-size: 14px;margin-top: 15px;padding: 0 28px;}.info h4 {display: inline-block;font-weight: 400;}.info span {color: #ff6700;}.info em {font-style: normal;color: #ebe4e0;margin: 0 6px 0 15px;}</style>
</head><body><div class="box"><img src="images/img.jpg" alt=""><p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p><div class="appraise">来自于 117384232 的评价</div><div class="info"><h4> <a href="#">Redmi AirDots真无线蓝...</a></h4><em>|</em><span> 99.9元</span></div></div>
</body></html>

老师总结

1. 布局为啥用不同盒子,我只想用div？

标签都是有语义的, 合理的地方用合理的标签。比如产品标题 就用 h, 大量文字段落就用p

2. 为啥用辣么多类名？

类名就是给每个盒子起了一个名字,可以更好的找到这个盒子, 选取盒子更容易,后期维护也方便。

3. 到底用 margin 还是 padding？

大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现。

4. 自己做没有思路？

布局有很多种实现方式，同学们可以开始先模仿我的写法，然后再做出自己的风格。 最后同学们一定多运用辅助工具,比如屏幕画笔,ps等

案例2:快报模块

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>新闻快报模块</title><style>* {margin: 0;padding: 0;}li {/* 去掉li前面的小圆点 */list-style: none;}.box {width: 248px;height: 163px;border: 1px solid #ccc;margin: 100px auto;}.box h3 {height: 32px;border-bottom: 1px dotted #ccc;font-size: 14px;font-weight: 400;line-height: 32px;padding-left: 15px;}.box ul li a {font-size: 12px;color: #666;text-decoration: none;}.box ul li a:hover {text-decoration: underline;}.box ul li {height: 23px;line-height: 23px;padding-left: 20px;}.box ul {margin-top: 7px;}</style>
</head><body><div class="box"><h3>品优购快报</h3><ul><li><a href="#">【特惠】爆款耳机5折秒！</a></li><li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li><li><a href="#">【特惠】爆款耳机5折秒！</a></li><li><a href="#">【特惠】9.9元洗100张照片！</a></li><li><a href="#">【特惠】长虹智能空调立省1000</a></li></ul></div>
</body></html>

四、圆角边框：border-radius

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

border-radius 属性用于设置元素的外边框圆角。

语法：数字越大，越圆润

border-radius:length;

 参数值可以为数值或百分比的形式

 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%

 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius

 兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用.

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>圆角边框</title><style>div {width: 300px;height: 150px;background-color: pink;border-radius: 10px;}</style>
</head><body><div></div>
</body></html>

1.圆形的做法:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>圆角边框常用写法</title><style>.yuanxing {width: 200px;height: 200px;background-color: pink;/* border-radius: 100px; *//* 50% 就是宽度和高度的一半  等价于 100px */border-radius: 50%;}.juxing {width: 300px;height: 100px;background-color: pink;/* 圆角矩形设置为高度的一半 */border-radius: 50px;}.radius {width: 200px;height: 200px;/* border-radius: 10px 20px 30px 40px; *//* border-radius: 10px 40px; */border-top-left-radius: 20px;background-color: pink;}</style>
</head><body>1. 圆形的做法:<div class="yuanxing"></div>2. 圆角矩形的做法:<div class="juxing"></div>3. 可以设置不同的圆角:<div class="radius"></div>
</body></html>

五、盒子阴影：box-shadow

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

语法：

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



注意：
1. 默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效
2.盒子阴影不占用空间，不会影响其他盒子排列。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>盒子阴影</title><style>div {width: 200px;height: 200px;background-color: pink;margin: 100px auto;box-shadow: 10px 10px;}</style>
</head><body><div></div>
</body></html>

运行结果;

inset是阴影跑里面去了，outset是默认值，跑外面

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>盒子阴影</title><style>div {width: 200px;height: 200px;background-color: pink;margin: 100px auto;box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3) inset;}</style>
</head><body><div></div>
</body></html>

六、文字阴影

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

语法：

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

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>文字阴影</title><style>div {font-size: 50px;color: orangered;font-weight: 700;text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);}</style>
</head><body><div>你是阴影,我是火影</div>
</body></html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/31827.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于 Qwen2.5-14B + Elasticsearch RAG 的大数据知识库智能问答系统

基于 Qwen2.5-14B + Elasticsearch RAG 的大数据知识库智能问答系统

AI 时代&#xff0c;如何从海量私有文档&#xff08;非公开&#xff09;中快速提取精准信息成为了许多企业和个人的迫切需求。 本文介绍了一款基于 Qwen2.5-14B 大语言模型&#xff08;换成 DeepSeek 原理一致&#xff09;与 Elasticsearch 搜索引擎构建的大数据知识库智能问答…
阅读更多...
算法手记1

算法手记1

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 目录 一.NC313 两个数组的交集 题目详情: 题目思路: 解题代码: 二.AB5 点击消除 题目详情: 题目思路: 解题代码: 结语 一.NC313 两个数组的交集 牛客网题目链接(点击即可跳转)…
阅读更多...
JMeter使用BeanShell断言

JMeter使用BeanShell断言

BeanShell简介 BeanShell是使用Java语法的一套脚本语言&#xff0c;在JMeter的多种组件中都有BeanShell的身影&#xff0c;如&#xff1a; 定时器&#xff1a;BeanShell Timer前置处理器&#xff1a;BeanShell PreProcessor采样器&#xff1a;BeanShell Sampler后置处理器&am…
阅读更多...
【技海登峰】Kafka漫谈系列（五）Java客户端之生产者Producer核心组件与实现原理剖析

【技海登峰】Kafka漫谈系列（五）Java客户端之生产者Producer核心组件与实现原理剖析

【技海登峰】Kafka漫谈系列（五）Java客户端之生产者Producer核心组件与实现原理剖析 向Kafka Broker服务节点中发送主题消息数据的应用程序被称为生产者，生产者与消费者均属于Kafka客户端，几乎所有主流语言都支持调用客户端API。官方提供了基于Java实现的kafka-clients，用于…
阅读更多...
【eNSP实战】配置交换机端口安全

【eNSP实战】配置交换机端口安全

拓扑图 目的&#xff1a;让交换机端口与主机mac绑定&#xff0c;防止私接主机。 主机PC配置不展示&#xff0c;按照图中配置即可。 开始配置之前&#xff0c;使用PC1 ping 一遍PC2、PC3、PC4、PC5&#xff0c;让交换机mac地址表刷新一下记录。 LSW1查看mac地址表 LSW1配置端…
阅读更多...
AWS Bedrock 正式接入 DeepSeek-R1 模型：安全托管的生成式 AI 解决方案

AWS Bedrock 正式接入 DeepSeek-R1 模型：安全托管的生成式 AI 解决方案

亚马逊云科技&#xff08;AWS&#xff09;于 2024 年 1 月 30 日 宣布&#xff0c;DeepSeek-R1 模型 正式通过 Amazon Bedrock 平台提供服务&#xff0c;用户可通过 Bedrock Marketplace 或自定义模型导入功能使用该模型。 DeepSeek-R1&#xff0c;其安全防护机制与全面的 AI 部…
阅读更多...
数据结构之线性表

数据结构之线性表

目录 1 简介 2 线性表的基本概念 3 顺序存储的线性表 3.1 定义线性表结构 3.2 初始化线性表 3.3 插入元素 3.4 删除元素 3.5 查找元素 3.6 扩容操作 3.7 打印线性表 4 线性表的应用 5 总结 1 简介 线性表是数据结构中最基础且常用的一种结构&#xff0c;它是由一…
阅读更多...
c#面试题12

c#面试题12

1.ApplicationPool介绍一下 c#里没有 2.XML 可扩展标记语言&#xff0c;一般以.xml文件格式的形式存在。可用于存储结构化的数据 3.ASP.NET的用户控件 将原始的控件&#xff0c;用户根据需要进行整合成一个新的控件 4.介绍一下code-Behind 即代码后置技术&#xff0c;就是…
阅读更多...
英语学习(GitHub学到的分享)

英语学习(GitHub学到的分享)

【英语语法&#xff1a;https://github.com/hzpt-inet-club/english-note】 【离谱的英语学习指南&#xff1a;https://github.com/byoungd/English-level-up-tips/tree/master】 【很喜欢文中的一句话&#xff1a;如果我轻轻松松的学习&#xff0c;生活的幸福指数会提高很多…
阅读更多...
C++蓝桥杯基础篇（十一）

C++蓝桥杯基础篇（十一）

片头 嗨~小伙伴们&#xff0c;大家好&#xff01;今天我们来学习C蓝桥杯基础篇&#xff08;十一&#xff09;&#xff0c;学习类&#xff0c;结构体&#xff0c;指针相关知识&#xff0c;准备好了吗&#xff1f;咱们开始咯~ 一、类与结构体 类的定义&#xff1a;在C中&#x…
阅读更多...
一次解决Andriod Studio Build Gradle很慢或报错下载失败等问题

一次解决Andriod Studio Build Gradle很慢或报错下载失败等问题

Andriod Studio创建项目时&#xff0c;Build gradle一直在下载或者卡住或者很慢&#xff0c;反正就是会在这里出现各自问题的&#xff0c;请看这里&#xff01; 来来来&#xff0c;全体目光向我看齐&#xff01;&#xff01;&#xff01;保准让你解决掉这个问题&#xff01;这…
阅读更多...
接口自动化入门 —— swagger/word/excelpdf等不同种类的接口文档理解！

接口自动化入门 —— swagger/word/excelpdf等不同种类的接口文档理解！

在接口自动化测试中&#xff0c;接口文档是开发和测试人员理解接口功能、参数和交互方式的重要依据。常见的接口文档类型包括Swagger、Word、Excel和PDF。 1. Swagger文档 Swagger是一种用于描述和定义RESTful API的规范&#xff0c;使用JSON或YAML格式来定义API的输入参数、输…
阅读更多...
Docker Compose国内镜像一键部署dify

Docker Compose国内镜像一键部署dify

克隆代码 git clone https://github.com/langgenius/dify.git进入docker目录 cd docker修改.env部分 # 将环境模版文件变量重命名 cp .env.example .env # 修改 .env,修改nginx的host和端口,避免端口冲突 NGINX_SERVER_NAME192.168.1.223 NGINX_PORT1880 NGINX_SSL_PORT1443…
阅读更多...
网络安全之文件上传漏洞

网络安全之文件上传漏洞

一&#xff0c;文件上传漏洞的原因&#xff1a; 文件上传漏洞的存在主要是因为开发者未对用户上传的文件进行充分的安全验证&#xff0c;导致攻击者可以上传恶意文件&#xff08;如 WebShell、恶意脚本等&#xff09;到服务器&#xff0c;进而控制服务器或实施进一步攻击。 常…
阅读更多...
QT系列教程(20) Qt 项目视图便捷类

QT系列教程(20) Qt 项目视图便捷类

视频连接 https://www.bilibili.com/video/BV1XY41127t3/?vd_source8be9e83424c2ed2c9b2a3ed1d01385e9 Qt项目视图便捷类 Qt项目视图提供了一些便捷类&#xff0c;包括QListWidget, QTableWidget&#xff0c; QTreeWidget等。我们分别介绍这几个便捷类。 我们先创建一个Qt …
阅读更多...
Java学习--MySQL

Java学习--MySQL

后端开发中&#xff0c;数据常存储在数据库中&#xff1a; 一、数据库基础 数据库&#xff1a;DataBase&#xff08;DB&#xff09;&#xff0c;是存储和管理数据的仓库 1.1连接数据库 mysql -u用户 -p密码 [-h数据库服务器ip地址 -P端口号] 1.2 关系型数据库 关系型数据…
阅读更多...
博客系统测试报告

博客系统测试报告

一、项目背景 以SSM为框架实现的博客系统有四个功能&#xff0c;登录账号进入博客首页&#xff0c;首页展示发布的博客列表&#xff0c;还可以编写或者更改博客内容。为了确保博客系统在各种场景下都能正常运行&#xff0c;需要进行尽可能全面的功能测试和自动化测试。本项目旨…
阅读更多...
Chebykan wx 文章阅读

Chebykan wx 文章阅读

文献筛选 [1] 神经网络&#xff1a;全面基础 [2] 通过sigmoid函数的超层叠近似 [3] 多层前馈网络是通用近似器 [5] 注意力是你所需要的 [6] 深度残差学习用于图像识别 [7] 视觉化神经网络的损失景观 [8] 牙齿模具点云补全通过数据增强和混合RL-GAN [9] 强化学习&#xff1a;一…
阅读更多...
LabVIEW变频器谐波分析系统

LabVIEW变频器谐波分析系统

随着工业自动化的发展&#xff0c;变频器在电力、机械等领域的应用日益广泛&#xff0c;但谐波问题直接影响系统效率与稳定性。传统谐波检测设备&#xff08;如Norma5000&#xff09;精度虽高&#xff0c;但价格昂贵且操作复杂&#xff0c;难以适应现场快速检测需求。本项目基于…
阅读更多...
C语言每日一练——day_4

C语言每日一练——day_4

引言 针对初学者&#xff0c;每日练习几个题&#xff0c;快速上手C语言。第四天。&#xff08;连续更新中&#xff09; 采用在线OJ的形式 什么是在线OJ&#xff1f; 在线判题系统&#xff08;英语&#xff1a;Online Judge&#xff0c;缩写OJ&#xff09;是一种在编程竞赛中用…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023