-
html、css学习记录【uniapp前奏】
Html
声明：该学习笔记源于菜鸟自学网站，特此记录笔记。很多示例源于此官网，若有侵权请联系删除。
这是一个简单的html也是最最最原始的“道生一一生二二生三三生万物”里面的一：
头 身体- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
它有个头有身体，头里面一般放网页的元：meat（一个定义网页编码格式的属性声明），以及网页的title：就是网页在你的（360或者2345或者IE或者火狐或者谷歌）浏览器里展示出来的时候，标签栏里的内容。
身体里面一般放页面的主体展示内容，比如标题啊，段落啊,图片啊之类的…
这是一个示例：（可以copy下来放到一个新建.txt文件里，再给后缀改为.html双击打开看一下效果）菜鸟教程(runoob.com) 我的第一个标题
我的第一个段落。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
一些常见的疑问：什么是html？什么是html标签？什么是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
- 28
- 29
- 30
- 31
- 32
链接的标签：
普通的链接：链接文本 图像链接：邮件链接： 发送e-mail 书签： 提示部分 跳到提示部分
- 1
- 2
- 3
- 4
- 5
- 6
- 7
是不是发现跟上面的基本标签不一样了？标签开始里面多了属性（《标签 属性》《/标签》）。
菜鸟教程对属性的介绍是这样的：属性可以在元素中添加附加信息，属性一般描述于开始标签，属性总是以名称/值对的形式出现，比如：name=“value”。
最常用的链接标签就需要属性来辅助了：链接文本这是上面常见标签的展示：
对应的网页：index.htmlDOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)title> head> <body> <h1>最大的标题h1> <h2> 次大的标题h2> <h3> . . . h3> <h4> . .h4> <h5> . h5> <h6>最小的标题h6> <p>这是一个段落，它前后都会有空行p> <br> <hr> <b>粗体文本b> <code>计算机代码code> <em>强调文本em> <i>斜体文本i> <kbd>键盘输入kbd> <pre>预格式化文本pre> <small>更小的文本small> <strong>重要的文本strong> <abbr> （缩写） <address> （联系信息） <bdo> （文字方向） <blockquote> （从另一个源引用的部分） <cite> （工作的名称） <del> （删除的文本） <ins> （插入的文本） <sub> （下标文本） <sup> （上标文本） <br> <br> <br> <br> <a href="http://www.example.com/">链接文本a> 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
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
至此，网页的核心已经说了一部分了，下面将讲解最最最最重要的另一部分了css:
：
上面说了链接的标签：访问菜鸟教程里面的href叫做标签a的属性。关于属性的介绍呢这里也只说一下链接部分的属性，更多属性知识想了解点击这里去学习：菜鸟属性学习
链接的标签a中可以存放的属性有这些：- href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。
- target（可选）：指定链接如何在浏览器中打开。常见的值包括 _blank（在新标签或窗口中打开链接）和 _self（在当前标签或窗口中打开链接）
- title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。
- rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。
源码在这儿，可以自己试一下index.html：
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)title> head> <body> <a href="https://www.runoob.com/" target="_blank">访问菜鸟教程!a> <p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。p> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
：
说一下head标签:head 元素包含了所有的头部标签元素。在 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为:
, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。 <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p>这里面提到了一个样式文件CSS，脚本Script。我们先说样式文件CSS，你可以这么理解它如果说html是一个网页的骨头的话它就是血肉细胞，Script则是网页的血管和神经网络。</p> <p>先说head标签里面能放的东西：</p> <ul><li><strong>mea</strong>t开头已经说了它叫元，声明整个网页的编码格式像这样：<code><meta charset="utf-8"> </code>写在html的head里，浏览器在打开你的网页之后就知道你这个网页用的是utf-8编码了，就不会导致乱码了。</li><li><strong>base</strong>标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:<code><base href="http://www.runoob.com/images/" target="_blank"></code>像这样你的整个网页的默认链接就声明好了<img src="https://1000bd.com/contentImg/2024/03/16/195818553.png" alt="在这里插入图片描述"></li><li><strong>link</strong>标签定义了文档与外部资源之间的关系。</li><li><strong>link</strong>标签通常用于链接到样式表:<code><link rel="stylesheet" type="text/css" href="mystyle.css"></code>能观察到它的属性跟上面提到的标签a有两个一样的，它的href在a标签里是填要跳转的网络地址的，在这儿功能一样但是要跳转的不再是网络链接地址了，而是被链接的文档位置，rel还是原来的功能,type是规定被链接文档的 MIME 类型。下面是一些link的相关属性介绍：<img src="https://1000bd.com/contentImg/2024/03/16/195818162.png" alt="在这里插入图片描述"><img src="https://1000bd.com/contentImg/2024/03/16/195818183.png" alt="在这里插入图片描述"></li><li><strong>style</strong>上面说的外部资源呢，讲的就是CSS资源了，在正式进入CSS学习之前，在讲一个标签叫：style标签定义了HTML文档的样式文件引用地址。在style元素中你也可以直接添加样式来渲染 HTML 文档 :下面你将读到一段非常重要的声明，重要到你对于后面uniapp的理解以及学习进度。</li></ul> <h4><a name="t2"></a><a id="_CSS__Cascading_Style_Sheets_HTML__XML_CSS__css_CSS__188"></a>声明： CSS 全称 Cascading Style Sheets，层叠样式表。是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。通过使用 CSS 我们可以大大提升网页开发的工作效率！</h4> <h2><a name="t3"></a><a id="CSS_190"></a>CSS</h2> <p>问：什么是CSS?</p> <ul><li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled"> CSS 指层叠样式表 (Cascading Style Sheets)</li><li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled"> 样式定义<strong>如何显示</strong> HTML 元素</li><li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled"> 样式通常存储在<strong>样式表</strong>中</li><li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled"> 把样式添加到 HTML 4.0 中，是为了<strong>解决内容与表现分离的问题</strong></li><li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled"> <strong>外部样式表</strong>可以极大提高工作效率</li><li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled"> 外部样式表通常存储在 <strong>CSS 文件</strong>中</li><li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled"> 多个样式定义可<strong>层叠</strong>为一个</li></ul> <p>样式表~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</p> <p>当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。如何插入样式表，插入样式表的方法有三种：<br> <strong>外部样式表(External style sheet)<br> 内部样式表(Internal style sheet)<br> 内联样式(Inline style)</strong></p> <p><strong>外部样式：</strong> 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：<br> index.html</p> <pre data-index="7" class="set-code-show prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span>head<span class="token operator">></span> <span class="token operator"><</span>link <span class="token assign-left variable">rel</span><span class="token operator">=</span><span class="token string">"stylesheet"</span> <span class="token assign-left variable">type</span><span class="token operator">=</span><span class="token string">"text/css"</span> <span class="token assign-left variable">href</span><span class="token operator">=</span><span class="token string">"mystyle.css"</span><span class="token operator">></span> <span class="token operator"><</span>/head<span class="token operator">></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <p>浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。<br> 外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：<br> mystyle.css：</p> <pre data-index="8" class="set-code-show prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;">hr <span class="token punctuation">{<!-- --></span>color:sienna<span class="token punctuation">;</span><span class="token punctuation">}</span> p <span class="token punctuation">{<!-- --></span>margin-left:20px<span class="token punctuation">;</span><span class="token punctuation">}</span> body <span class="token punctuation">{<!-- --></span>background-image:url<span class="token punctuation">(</span><span class="token string">"/images/back40.gif"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <p><strong>内部样式：</strong> 当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 </p> <pre data-index="9" class="set-code-show prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span>head<span class="token operator">></span> <span class="token operator"><</span>style<span class="token operator">></span> hr <span class="token punctuation">{<!-- --></span>color:sienna<span class="token punctuation">;</span><span class="token punctuation">}</span> p <span class="token punctuation">{<!-- --></span>margin-left:20px<span class="token punctuation">;</span><span class="token punctuation">}</span> body <span class="token punctuation">{<!-- --></span>background-image:url<span class="token punctuation">(</span><span class="token string">"images/back40.gif"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token operator"><</span>/style<span class="token operator">></span> <span class="token operator"><</span>/head<span class="token operator">></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li></ul></pre> <p><strong>内联样式：</strong> 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：</p> <pre data-index="10" class="set-code-show prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span>p <span class="token assign-left variable">style</span><span class="token operator">=</span><span class="token string">"color:sienna;margin-left:20px"</span><span class="token operator">></span>这是一个段落。<span class="token operator"><</span>/p<span class="token operator">></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <hr> <p><mark><strong>跟java的继承特性一样，css也有自己的继承特性：</strong></mark></p> <p><img src="https://1000bd.com/contentImg/2024/03/16/195818357.png" alt="在这里插入图片描述"><br> <strong>也就是说它有一个优先级：</strong><br> 多重样式优先级，样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。</p> <p>一般情况下，优先级如下：</p> <p><strong>（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式</strong></p> <p><strong>CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:</strong><br> <img src="https://1000bd.com/contentImg/2024/03/16/195818385.png" alt="在这里插入图片描述"><br> 示例一：</p> <pre data-index="11" class="set-code-hide prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span><span class="token operator">!</span>DOCTYPE html<span class="token operator">></span> <span class="token operator"><</span>html<span class="token operator">></span> <span class="token operator"><</span>head<span class="token operator">></span> <span class="token operator"><</span>meta <span class="token assign-left variable">charset</span><span class="token operator">=</span><span class="token string">"utf-8"</span><span class="token operator">></span> <span class="token operator"><</span>title<span class="token operator">></span>菜鸟教程<span class="token punctuation">(</span>runoob.com<span class="token punctuation">)</span><span class="token operator"><</span>/title<span class="token operator">></span> <span class="token operator"><</span>style<span class="token operator">></span> body <span class="token punctuation">{<!-- --></span>background-color:yellow<span class="token punctuation">;</span><span class="token punctuation">}</span> h1 <span class="token punctuation">{<!-- --></span>font-size:36pt<span class="token punctuation">;</span><span class="token punctuation">}</span> h2 <span class="token punctuation">{<!-- --></span>color:blue<span class="token punctuation">;</span><span class="token punctuation">}</span> p <span class="token punctuation">{<!-- --></span>margin-left:50px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token operator"><</span>/style<span class="token operator">></span> <span class="token operator"><</span>/head<span class="token operator">></span> <span class="token operator"><</span>body<span class="token operator">></span> <span class="token operator"><</span>h<span class="token operator"><span class="token file-descriptor important">1</span>></span>这个标题设置的大小为 <span class="token number">36</span> pt<span class="token operator"><</span>/h<span class="token operator"><span class="token file-descriptor important">1</span>></span> <span class="token operator"><</span>h<span class="token operator"><span class="token file-descriptor important">2</span>></span>这个标题设置的颜色为蓝色：blue<span class="token operator"><</span>/h<span class="token operator"><span class="token file-descriptor important">2</span>></span> <span class="token operator"><</span>p<span class="token operator">></span>这个段落的左外边距为 <span class="token number">50</span> 像素：50px<span class="token operator"><</span>/p<span class="token operator">></span> <span class="token operator"><</span>/body<span class="token operator">></span> <span class="token operator"><</span>/html<span class="token operator">></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li></ul></pre> <p>效果图：<br> <img src="https://1000bd.com/contentImg/2024/03/16/195817991.png" alt="在这里插入图片描述"><br> 示例二：</p> <pre data-index="12" class="set-code-hide prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span><span class="token operator">!</span>DOCTYPE html<span class="token operator">></span> <span class="token operator"><</span>html<span class="token operator">></span> <span class="token operator"><</span>head<span class="token operator">></span> <span class="token operator"><</span>meta <span class="token assign-left variable">charset</span><span class="token operator">=</span><span class="token string">"utf-8"</span><span class="token operator">></span> <span class="token operator"><</span>title<span class="token operator">></span>菜鸟教程<span class="token punctuation">(</span>runoob.com<span class="token punctuation">)</span><span class="token operator"><</span>/title<span class="token operator">></span> <span class="token operator"><</span>style<span class="token operator">></span> body <span class="token punctuation">{<!-- --></span>background-color:tan<span class="token punctuation">;</span><span class="token punctuation">}</span> h1 <span class="token punctuation">{<!-- --></span>color:maroon<span class="token punctuation">;</span>font-size:20pt<span class="token punctuation">;</span><span class="token punctuation">}</span> hr <span class="token punctuation">{<!-- --></span>color:navy<span class="token punctuation">;</span><span class="token punctuation">}</span> p <span class="token punctuation">{<!-- --></span>font-size:11pt<span class="token punctuation">;</span>margin-left:15px<span class="token punctuation">;</span><span class="token punctuation">}</span> a:link <span class="token punctuation">{<!-- --></span>color:green<span class="token punctuation">;</span><span class="token punctuation">}</span> a:visited <span class="token punctuation">{<!-- --></span>color:yellow<span class="token punctuation">;</span><span class="token punctuation">}</span> a:hover <span class="token punctuation">{<!-- --></span>color:black<span class="token punctuation">;</span><span class="token punctuation">}</span> a:active <span class="token punctuation">{<!-- --></span>color:blue<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token operator"><</span>/style<span class="token operator">></span> <span class="token operator"><</span>/head<span class="token operator">></span> <span class="token operator"><</span>body<span class="token operator">></span> <span class="token operator"><</span>h<span class="token operator"><span class="token file-descriptor important">1</span>></span>这是标题<span class="token operator"><</span>/h<span class="token operator"><span class="token file-descriptor important">1</span>></span> <span class="token operator"><</span>hr<span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span>你可以看到这个段落是 被设定的 CSS 渲染的。<span class="token operator"><</span>/p<span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span><span class="token operator"><</span>a <span class="token assign-left variable">href</span><span class="token operator">=</span><span class="token string">"https://www.runoob.com"</span> <span class="token assign-left variable">target</span><span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span>这是一个链接<span class="token operator"><</span>/a<span class="token operator">></span><span class="token operator"><</span>/p<span class="token operator">></span> <span class="token operator"><</span>/body<span class="token operator">></span> <span class="token operator"><</span>/html<span class="token operator">></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2024/03/16/195818514.png" alt="在这里插入图片描述"></p> <h3><a name="t4"></a><a id="CSSIDClass_320"></a>CSS里的ID与Class</h3> <p>id以 # 来定义<br> class以 . 来定义</p> <p>在html元素中设置CSS样式，你需要在元素中设置ID和Class选择器。<br> id选择器可以为标有特定id的HTML元素指定特定的样式，HTML元素以id属性来设置id选择器，CSS中id选择器以#来定义。以下示例规则应用于元素属性id=”para1“:</p> <pre data-index="13" class="set-code-show prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token comment">#para1</span> <span class="token punctuation">{<!-- --></span> text-align:center<span class="token punctuation">;</span> color:red<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <p><strong>ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。</strong></p> <p>class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用。class选择器在HTML中以class属性表示，在css中，类选择器以一个.号显示：</p> <pre data-index="14" class="set-code-show prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;">.center <span class="token punctuation">{<!-- --></span>text-align:center<span class="token punctuation">;</span><span class="token punctuation">}</span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p><strong>当然还可以这么用：多个class选择器可以使用空格分开：</strong><br> <img src="https://1000bd.com/contentImg/2024/03/16/195818168.png" alt="在这里插入图片描述"><br> CSS的一些常见常用属性：</p> <h3><a name="t5"></a><a id="background_345"></a>背景样式background</h3> <pre data-index="15" class="set-code-hide prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> background-color:<span class="token comment">#F5E2EC; /*背景颜色*/ </span> background:transparent<span class="token punctuation">;</span> /*透视背景*/ background-image <span class="token builtin class-name">:</span> url<span class="token punctuation">(</span>/image/bg.gif<span class="token punctuation">)</span><span class="token punctuation">;</span> /*背景图片*/ background-attachment <span class="token builtin class-name">:</span> fixed<span class="token punctuation">;</span> /*浮水印固定背景*/ background-repeat <span class="token builtin class-name">:</span> repeat<span class="token punctuation">;</span> /*重复排列-网页默认*/ background-repeat <span class="token builtin class-name">:</span> no-repeat<span class="token punctuation">;</span> /*不重复排列*/ background-repeat <span class="token builtin class-name">:</span> repeat-x<span class="token punctuation">;</span> /*在x轴重复排列*/ background-repeat <span class="token builtin class-name">:</span> repeat-y<span class="token punctuation">;</span> /*在y轴重复排列*/ 指定背景位置 background-position <span class="token builtin class-name">:</span> <span class="token number">90</span>% <span class="token number">90</span>%<span class="token punctuation">;</span> /*背景图片x与y轴的位置*/ background-position <span class="token builtin class-name">:</span> <span class="token function">top</span><span class="token punctuation">;</span> /*向上对齐*/ background-position <span class="token builtin class-name">:</span> buttom<span class="token punctuation">;</span> /*向下对齐*/ background-position <span class="token builtin class-name">:</span> left<span class="token punctuation">;</span> /*向左对齐*/ background-position <span class="token builtin class-name">:</span> right<span class="token punctuation">;</span> /*向右对齐*/ background-position <span class="token builtin class-name">:</span> center<span class="token punctuation">;</span> /*居中对齐*/ CSS3之后增加了： background-image //CSS3中可以通过background-image属性添加背景图片 不同的背景图像和图像用逗号隔开，所有的图片中 显示在最顶端的为第一张。 background-size //background-size指定背景图像的大小。之前背景图像大小由图像的实际大小决定。CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。你指定的大小是相对于父元素的宽度和高度的百分比的大小。 background-origin //指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像 background-clip //背景剪裁属性是从指定位置开始绘制。 ——————————————————————————————————————————————————————————————————— <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li></ul></pre> <h3><a name="t6"></a><a id="margin_372"></a>外边距margin</h3> <pre data-index="16" class="set-code-show prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;">margin-top:100px<span class="token punctuation">;</span> margin-bottom:100px<span class="token punctuation">;</span> margin-right:50px<span class="token punctuation">;</span> margin-left:50px<span class="token punctuation">;</span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <p>margin属性可以有一到四个值。</p> <ul><li>margin:25px 50px 75px 100px;<br> 上边距为25px<br> 右边距为50px<br> 下边距为75px<br> 左边距为100px</li><li>margin:25px 50px 75px;<br> 上边距为25px<br> 左右边距为50px<br> 下边距为75px</li><li>margin:25px 50px;<br> 上下边距为25px<br> 左右边距为50px</li><li>margin:25px;<br> 所有的4个边距都是25px</li></ul> <p><strong>还可以指定厘米：margin-top:2cm;<br> 还可以指定距离某一个控件有多远：margin-bottom:25%;</strong></p> <h3><a name="t7"></a><a id="padding_400"></a>内边距padding</h3> <p>Padding属性，可以有一到四个值。</p> <ul><li>padding:25px 50px 75px 100px;<br> 上填充为25px<br> 右填充为50px<br> 下填充为75px<br> 左填充为100px</li><li>padding:25px 50px 75px;<br> 上填充为25px<br> 左右填充为50px<br> 下填充为75px</li><li>padding:25px 50px;<br> 上下填充为25px<br> 左右填充为50px</li><li>padding:25px;<br> 所有的填充都是25px</li></ul> <p><strong>厘米和百分比它也支持的</strong></p> <h3><a name="t8"></a><a id="Text_420"></a>文本样式Text</h3> <p>添加颜色部分：</p> <pre data-index="17" class="set-code-show prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;">body <span class="token punctuation">{<!-- --></span>color:red<span class="token punctuation">;</span><span class="token punctuation">}</span> h1 <span class="token punctuation">{<!-- --></span>color:<span class="token comment">#00ff00;}</span> h2 <span class="token punctuation">{<!-- --></span>color:rgb<span class="token punctuation">(</span><span class="token number">255,0</span>,0<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <ul><li><strong>text-align</strong>文本对齐方式：</li></ul> <pre data-index="18" class="set-code-show prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;">h1 <span class="token punctuation">{<!-- --></span>text-align:center<span class="token punctuation">;</span><span class="token punctuation">}</span> p.date <span class="token punctuation">{<!-- --></span>text-align:right<span class="token punctuation">;</span><span class="token punctuation">}</span> p.main <span class="token punctuation">{<!-- --></span>text-align:justify<span class="token punctuation">;</span><span class="token punctuation">}</span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2024/03/16/195818402.png" alt="在这里插入图片描述"></p> <ul><li><strong>text-decoration ：</strong> 属性用来设置或删除文本的装饰。</li></ul> <pre data-index="19" class="set-code-show prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;">a <span class="token punctuation">{<!-- --></span>text-decoration:none<span class="token punctuation">;</span><span class="token punctuation">}</span>//从设计的角度看 text-decoration属性主要是用来删除链接的下划线的 h1 <span class="token punctuation">{<!-- --></span>text-decoration:overline<span class="token punctuation">;</span><span class="token punctuation">}</span>//字体头上有划线 h2 <span class="token punctuation">{<!-- --></span>text-decoration:line-through<span class="token punctuation">;</span><span class="token punctuation">}</span>//字体中间有划线 h3 <span class="token punctuation">{<!-- --></span>text-decoration:underline<span class="token punctuation">;</span><span class="token punctuation">}</span>//字体底部有下划线 <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <p>大小写文本转换</p> <pre data-index="20" class="set-code-show prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;">p.uppercase <span class="token punctuation">{<!-- --></span>text-transform:uppercase<span class="token punctuation">;</span><span class="token punctuation">}</span> //THIS IS SOME TEXT.全部大写 p.lowercase <span class="token punctuation">{<!-- --></span>text-transform:lowercase<span class="token punctuation">;</span><span class="token punctuation">}</span> //this is some text.全部小写 p.capitalize <span class="token punctuation">{<!-- --></span>text-transform:capitalize<span class="token punctuation">;</span><span class="token punctuation">}</span> //This Is Some Text.首字母大写 <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <ul><li><strong>text-indent</strong>文本缩进：</li></ul> <pre data-index="21" class="set-code-show prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;">p <span class="token punctuation">{<!-- --></span>text-indent:50px<span class="token punctuation">;</span><span class="token punctuation">}</span> //一段话第一行的缩进 <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p>小总结：</p> <pre data-index="22" class="set-code-hide prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> 序号 中文说明 标记语法 <span class="token number">1</span> 行 间 距 <span class="token punctuation">{<!-- --></span>line-height:数值<span class="token operator">|</span>inherit<span class="token operator">|</span>normal<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token number">2</span> 文本修饰 <span class="token punctuation">{<!-- --></span>text-decoration:inherit<span class="token operator">|</span>none<span class="token operator">|</span>underline<span class="token operator">|</span>overline<span class="token operator">|</span>line-through<span class="token operator">|</span>blink<span class="token punctuation">}</span> <span class="token number">3</span> 段首空格 <span class="token punctuation">{<!-- --></span>text-indent:数值<span class="token operator">|</span>inherit<span class="token punctuation">}</span> <span class="token number">4</span> 水平对齐 <span class="token punctuation">{<!-- --></span>text-align:left<span class="token operator">|</span>right<span class="token operator">|</span>center<span class="token operator">|</span>justify<span class="token punctuation">}</span> <span class="token number">5</span> 垂直对齐 <span class="token punctuation">{<!-- --></span>vertical-align:inherit<span class="token operator">|</span><span class="token function">top</span><span class="token operator">|</span>bottom<span class="token operator">|</span>text-top<span class="token operator">|</span>text-bottom<span class="token operator">|</span>baseline<span class="token operator">|</span>middle<span class="token operator">|</span>sub<span class="token operator">|</span>super<span class="token punctuation">}</span> <span class="token number">6</span> 书写方式 <span class="token punctuation">{<!-- --></span>writing-mode:lr-tb<span class="token operator">|</span>tb-rl<span class="token punctuation">}</span> color <span class="token builtin class-name">:</span> <span class="token comment">#999999; /*文字颜色*/</span> font-family <span class="token builtin class-name">:</span> 宋体,sans-serif<span class="token punctuation">;</span> /*文字字体*/ font-size <span class="token builtin class-name">:</span> 9pt<span class="token punctuation">;</span> /*文字大小*/ font-style:itelic<span class="token punctuation">;</span> /*文字斜体*/ font-variant:small-caps<span class="token punctuation">;</span> /*小字体*/ letter-spacing <span class="token builtin class-name">:</span> 1pt<span class="token punctuation">;</span> /*字间距离*/ line-height <span class="token builtin class-name">:</span> <span class="token number">200</span>%<span class="token punctuation">;</span> /*设置行高*/ font-weight:bold<span class="token punctuation">;</span> /*文字粗体*/ vertical-align:sub<span class="token punctuation">;</span> /*下标字*/ vertical-align:super<span class="token punctuation">;</span> /*上标字*/ text-decoration:line-through<span class="token punctuation">;</span> /*加删除线*/ text-decoration: overline<span class="token punctuation">;</span> /*加顶线*/ text-decoration:underline<span class="token punctuation">;</span> /*加下划线*/ text-decoration:none<span class="token punctuation">;</span> /*删除链接下划线*/ text-transform <span class="token builtin class-name">:</span> capitalize<span class="token punctuation">;</span> /*首字大写*/ text-transform <span class="token builtin class-name">:</span> uppercase<span class="token punctuation">;</span> /*英文大写*/ text-transform <span class="token builtin class-name">:</span> lowercase<span class="token punctuation">;</span> /*英文小写*/ text-align:right<span class="token punctuation">;</span> /*文字右对齐*/ text-align:left<span class="token punctuation">;</span> /*文字左对齐*/ text-align:center<span class="token punctuation">;</span> /*文字居中对齐*/ text-align:justify<span class="token punctuation">;</span> /*文字分散对齐*/ vertical-align属性 vertical-align:top<span class="token punctuation">;</span> /*垂直向上对齐*/ vertical-align:bottom<span class="token punctuation">;</span> /*垂直向下对齐*/ vertical-align:middle<span class="token punctuation">;</span> /*垂直居中对齐*/ vertical-align:text-top<span class="token punctuation">;</span> /*文字垂直向上对齐*/ vertical-align:text-bottom<span class="token punctuation">;</span> /*文字垂直向下对齐*/ ————————————————- 小总结来自博客：【~heart将心比心】 原文链接：https://blog.csdn.net/qq_42412061/article/details/127691649 <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li></ul></pre> <p>CSS3之后新增的文本特性：</p> <ul><li>text-shadow</li><li>box-shadow</li><li>text-overflow</li><li>word-wrap</li><li>word-break</li></ul> <pre data-index="23" class="set-code-show prettyprint"><code class="prism language-csharp has-numbering" onclick="mdcp.signin(event)" style="position: unset;">h1 <span class="token punctuation">{<!-- --></span> <span class="token comment">//指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色</span> text<span class="token operator">-</span>shadow<span class="token punctuation">:</span> 5px 5px 5px #FF0000<span class="token punctuation">;</span> <span class="token punctuation">}</span> div <span class="token punctuation">{<!-- --></span> <span class="token comment">//CSS3 中 CSS3 box-shadow 属性适用于盒子阴影 有模糊效果</span> box<span class="token operator">-</span>shadow<span class="token punctuation">:</span> 10px 10px 5px #<span class="token number">888888</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li></ul></pre> <h3><a name="t9"></a><a id="_border_519"></a>边框 border</h3> <p><strong>1，定义边框的大样式</strong>：</p> <pre data-index="24" class="set-code-show prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;">p.none <span class="token punctuation">{<!-- --></span>border-style:none<span class="token punctuation">;</span><span class="token punctuation">}</span> //无边框 p.dotted <span class="token punctuation">{<!-- --></span>border-style:dotted<span class="token punctuation">;</span><span class="token punctuation">}</span> //点虚线边框 p.dashed <span class="token punctuation">{<!-- --></span>border-style:dashed<span class="token punctuation">;</span><span class="token punctuation">}</span> //粗虚线边框 p.solid <span class="token punctuation">{<!-- --></span>border-style:solid<span class="token punctuation">;</span><span class="token punctuation">}</span> //实线边框 p.double <span class="token punctuation">{<!-- --></span>border-style:double<span class="token punctuation">;</span><span class="token punctuation">}</span> //双边框 p.groove <span class="token punctuation">{<!-- --></span>border-style:groove<span class="token punctuation">;</span><span class="token punctuation">}</span> //凹槽边框 p.ridge <span class="token punctuation">{<!-- --></span>border-style:ridge<span class="token punctuation">;</span><span class="token punctuation">}</span> //垄状边框 p.inset <span class="token punctuation">{<!-- --></span>border-style:inset<span class="token punctuation">;</span><span class="token punctuation">}</span> //嵌入边框 p.outset <span class="token punctuation">{<!-- --></span>border-style:outset<span class="token punctuation">;</span><span class="token punctuation">}</span> //外凸边框 p.hidden <span class="token punctuation">{<!-- --></span>border-style:hidden<span class="token punctuation">;</span><span class="token punctuation">}</span> //隐藏边框 p.mix <span class="token punctuation">{<!-- --></span>border-style: dotted dashed solid double<span class="token punctuation">;</span><span class="token punctuation">}</span> //混合边框 <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li></ul></pre> <p>展示一下UI显示：<br> <img src="https://1000bd.com/contentImg/2024/03/16/195818252.png" alt="在这里插入图片描述"><br> <strong>2，边框的宽度</strong> ： border-width</p> <pre data-index="25" class="set-code-show prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;">// thick , medium , thin p.one <span class="token punctuation">{<!-- --></span> border-style:solid<span class="token punctuation">;</span> border-width:5px<span class="token punctuation">;</span> <span class="token punctuation">}</span> p.two <span class="token punctuation">{<!-- --></span> border-style:solid<span class="token punctuation">;</span> border-width:medium<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li></ul></pre> <p><strong>3,边框颜色</strong> ：border-color</p> <pre data-index="26" class="set-code-show prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;">p.one <span class="token punctuation">{<!-- --></span> border-style:solid<span class="token punctuation">;</span> border-color:red<span class="token punctuation">;</span> <span class="token punctuation">}</span> p.two <span class="token punctuation">{<!-- --></span> border-style:solid<span class="token punctuation">;</span> border-color:<span class="token comment">#98bf21;</span> <span class="token punctuation">}</span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li></ul></pre> <p>1中边框的样式也可以各设各的：</p> <pre data-index="27" class="set-code-hide prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;">border-style属性可以有1-4个值： - <span class="token number">1</span>，border-style:dotted solid double dashed<span class="token punctuation">;</span> 上边框是 dotted 右边框是 solid 底边框是 double 左边框是 dashed - <span class="token number">2</span>，border-style:dotted solid double<span class="token punctuation">;</span> 上边框是 dotted 左、右边框是 solid 底边框是 double - <span class="token number">3</span>，border-style:dotted solid<span class="token punctuation">;</span> 上、底边框是 dotted 右、左边框是 solid - <span class="token number">4</span>，border-style:dotted<span class="token punctuation">;</span> 四面边框是 dotted 各设各的就是这样： <span class="token operator"><</span>style<span class="token operator">></span> p <span class="token punctuation">{<!-- --></span> border-top-style:dotted<span class="token punctuation">;</span> border-right-style:solid<span class="token punctuation">;</span> border-bottom-style:dotted<span class="token punctuation">;</span> border-left-style:solid<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token operator"><</span>/style<span class="token operator">></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li></ul></pre> <h3><a name="t10"></a><a id="Dimension_601"></a>尺寸（Dimension）</h3> <pre data-index="28" class="set-code-show prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;">属性 描述 height 设置元素的高度。 line-height 设置行高。 max-height 设置元素的最大高度。 max-width 设置元素的最大宽度。 min-height 设置元素的最小高度。 min-width 设置元素的最小宽度。 width 设置元素的宽度。 <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li></ul></pre> <h3><a name="t11"></a><a id="DisplayVisibility_androidvisibility_614"></a>展示Display与可见性Visibility [占不占空间与android里的visibility属性]</h3> <p>display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。</p> <p><em>跟安卓布局文件里的none invisibility的区别是一样的！</em><br> <strong>隐藏元素 - display:none或visibility:hidden</strong><br> 隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。</p> <pre data-index="29" class="set-code-show prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;">display:none<span class="token punctuation">;</span> //隐藏控件且不占空间 visibility:hidden<span class="token punctuation">;</span> //控件不可见 但是还在原地 display:inline<span class="token punctuation">;</span> //把原有的展示在一行 display:block<span class="token punctuation">;</span> //把原有的块儿给展开 <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <h3><a name="t12"></a><a id="Overflow_scrollview_628"></a>Overflow 有滚动条的scrollview</h3> <pre data-index="30" class="set-code-show prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;">div <span class="token punctuation">{<!-- --></span> width: 200px<span class="token punctuation">;</span> height: 50px<span class="token punctuation">;</span> background-color: <span class="token comment">#eee;</span> overflow: scroll<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> <p><strong>CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。</strong></p> <p><mark>overflow属性有以下值：</mark></p> <div class="table-box"><table><thead><tr><th>值</th><th>描述</th></tr></thead><tbody><tr><td>visible</td><td>默认值。内容不会被修剪，会呈现在元素框之外。</td></tr><tr><td>hidden</td><td>内容会被修剪，并且其余内容是不可见的。</td></tr><tr><td>scroll</td><td>内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。</td></tr><tr><td>auto</td><td>如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。</td></tr><tr><td>inherit</td><td>规定应该从父元素继承 overflow 属性的值。</td></tr></tbody></table></div> <h3><a name="t13"></a><a id="Float_651"></a>Float浮动</h3> <p>可以理解为word文本里图片插入字符时的几种状况，会随着窗口变化。</p> <pre data-index="31" class="set-code-show prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;">.类名 <span class="token punctuation">{<!-- --></span> <span class="token operator">==</span> float:left<span class="token punctuation">;</span> <span class="token operator">==</span> width:110px<span class="token punctuation">;</span> height:90px<span class="token punctuation">;</span> margin:5px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li></ul></pre> <p>元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。</p> <p>clear 属性指定元素两侧不能出现浮动元素。</p> <pre data-index="32" class="set-code-show prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;">.text_line <span class="token punctuation">{<!-- --></span> clear:both<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <p>像这样：<br> <img src="https://1000bd.com/contentImg/2024/03/16/195818319.png" alt="在这里插入图片描述"><br> <img src="https://1000bd.com/contentImg/2024/03/16/195818219.png" alt="在这里插入图片描述"></p> <p><strong>CSS3边框</strong><br> border-radius： 圆角边框<br> box-shadow：阴影属性<br> border-image： 允许你指定一个图片作为边框</p> <pre data-index="33" class="set-code-show prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> border-radius: 50px 20px<span class="token punctuation">;</span> //如果设置了两个值，第一个用于左上角和右下角，第二个用于右上角和左下角 border-radius:25px<span class="token punctuation">;</span>//四个角都是圆形 <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> <div class="table-box"><table><thead><tr><th>属性</th><th>说明</th></tr></thead><tbody><tr><td>border-image</td><td>设置所有边框图像的速记属性。</td></tr><tr><td>border-radius</td><td>一个用于设置所有四个边框- *-半径属性的速记属性</td></tr><tr><td>box-shadow</td><td>附加一个或多个下拉框的阴影</td></tr></tbody></table></div> <h3><a name="t14"></a><a id="CSSborderradius_694"></a>CSS圆角border-radius</h3> <pre data-index="34" class="set-code-hide prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">#rcorners1</span> <span class="token punctuation">{<!-- --></span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> #8AC007<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#rcorners2</span> <span class="token punctuation">{<!-- --></span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 2px solid #8AC007<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#rcorners3</span> <span class="token punctuation">{<!-- --></span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>paper.gif<span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token property">background-position</span><span class="token punctuation">:</span> left top<span class="token punctuation">;</span> <span class="token property">background-repeat</span><span class="token punctuation">:</span> repeat<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li></ul></pre> <p>CSS3 border-radius - 指定每个圆角<br> 如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。<br> 但是，如果你要在四个角上一一指定，可以使用以下规则：</p> <ul><li>四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。</li><li>三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角</li><li>两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角</li><li>一个值： 四个圆角值相同</li></ul> <pre data-index="35" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>菜鸟教程(runoob.com)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">#rcorners4</span> <span class="token punctuation">{<!-- --></span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 15px 50px 30px 5px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> #8AC007<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#rcorners5</span> <span class="token punctuation">{<!-- --></span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 15px 50px 30px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> #8AC007<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#rcorners6</span> <span class="token punctuation">{<!-- --></span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 15px 50px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> #8AC007<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>四个值 - border-radius: 15px 50px 30px 5px:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rcorners4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>三个值 - border-radius: 15px 50px 30px:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rcorners5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>两个值 - border-radius: 15px 50px:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rcorners6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li></ul></pre> <p>效果图：<br> <img src="https://1000bd.com/contentImg/2024/03/16/195818329.png" alt="在这里插入图片描述"><br> 还有椭圆形的：</p> <pre data-index="36" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>菜鸟教程(runoob.com)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">#rcorners7</span> <span class="token punctuation">{<!-- --></span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 50px/15px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> #8AC007<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#rcorners8</span> <span class="token punctuation">{<!-- --></span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 15px/50px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> #8AC007<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#rcorners9</span> <span class="token punctuation">{<!-- --></span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> #8AC007<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>椭圆边框 - border-radius: 50px/15px:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rcorners7<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> 椭圆边框 - border-radius: 15px/50px:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rcorners8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>椭圆边框 - border-radius: 50%:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rcorners9<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2024/03/16/195818480.png" alt="在这里插入图片描述"><br> 小总结：</p> <div class="table-box"><table><thead><tr><th>属性</th><th>描述</th></tr></thead><tbody><tr><td>border-radius</td><td>所有四个边角 border-<em>-</em>-radius 属性的缩写</td></tr><tr><td>border-top-left-radius</td><td>定义了左上角的弧度</td></tr><tr><td>border-top-right-radius</td><td>定义了右上角的弧度</td></tr><tr><td>border-bottom-right-radius</td><td>定义了右下角的弧度</td></tr><tr><td>border-bottom-left-radius</td><td>定义了左下角的弧度</td></tr></tbody></table></div> <hr> <h3><a name="t15"></a><a id="CSS3_838"></a>CSS3中的渐变</h3> <p>下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p> <pre data-index="37" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">#grad { background-image: linear-gradient(#e66465, #9198e5); } <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <ul><li>线性渐变 - 从左到右<br> 下面的实例演示了<strong>从左边开始的线性渐变</strong>。起点是红色，慢慢过渡到黄色：</li></ul> <pre data-index="38" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">#grad { height: 200px; background-image: linear-gradient(to right, red , yellow); } <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <ul><li>线性渐变 - 对角<br> 你可以通过指定水平和垂直的起始位置来制作一个对角渐变。<br> 下面的实例演示了<strong>从左上角开始</strong>（<strong>到右下角</strong>）的线性渐变。起点是红色，慢慢过渡到黄色：</li></ul> <pre data-index="39" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">#grad { height: 200px; background-image: linear-gradient(to bottom right, red, yellow); } <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <ul><li>使用角度<br> 如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。</li></ul> <pre data-index="40" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">background-image: linear-gradient(angle, color-stop1, color-stop2); <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2024/03/16/195818576.png" alt="在这里插入图片描述"><br> 但是，请注意很多浏览器（Chrome、Safari、firefox等）的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。<br> 下面的实例演示了如何在线性渐变上使用角度：<br> <img src="https://1000bd.com/contentImg/2024/03/16/195818064.png" alt="这是一张插图"><br> 当然也可以创建多个颜色节点：</p> <pre data-index="41" class="set-code-show prettyprint"><code class="prism language-csharp has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token preprocessor property">#grad {<!-- --></span> background<span class="token operator">-</span>image<span class="token punctuation">:</span> linear<span class="token operator">-</span><span class="token function">gradient</span><span class="token punctuation">(</span>red<span class="token punctuation">,</span> yellow<span class="token punctuation">,</span> green<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token preprocessor property">#grad {<!-- --></span> <span class="token comment">/* 标准的语法 */</span> background<span class="token operator">-</span>image<span class="token punctuation">:</span> linear<span class="token operator">-</span><span class="token function">gradient</span><span class="token punctuation">(</span><span class="token class-name">to</span> right<span class="token punctuation">,</span> red<span class="token punctuation">,</span>orange<span class="token punctuation">,</span>yellow<span class="token punctuation">,</span>green<span class="token punctuation">,</span>blue<span class="token punctuation">,</span>indigo<span class="token punctuation">,</span>violet<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li></ul></pre> <p><strong>像下面这样：</strong><br> <img src="https://1000bd.com/contentImg/2024/03/16/195818363.png" alt="在这里插入图片描述"></p> <ul><li>使用透明度（transparent）<br> CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。<br> 为了添加透明度，我们使用 <strong>rgba() 函数</strong>来定义颜色节点。<strong>rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明</strong>。</li></ul> <pre data-index="42" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">#grad</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>to right<span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>1<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2024/03/16/195818344.png" alt="在这里插入图片描述"></p> <ul><li>一个重复的线性渐变：</li></ul> <pre data-index="43" class="set-code-show prettyprint"><code class="prism language-csharp has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token preprocessor property">#grad {<!-- --></span> <span class="token comment">/* 标准的语法 */</span> background<span class="token operator">-</span>image<span class="token punctuation">:</span> repeating<span class="token operator">-</span>linear<span class="token operator">-</span><span class="token function">gradient</span><span class="token punctuation">(</span>red<span class="token punctuation">,</span> yellow <span class="token number">10</span><span class="token operator">%</span><span class="token punctuation">,</span> green <span class="token number">20</span><span class="token operator">%</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <p>圆形渐变radial-gradient：略。。。。</p> <h3><a name="t16"></a><a id="_905"></a>按钮</h3> <ul><li>按钮的样式：</li></ul> <pre data-index="44" class="set-code-hide prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector"><style> .button</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span> #4CAF50<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 15px 32px<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 4px 2px<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> <span class="token punctuation">}</span> </style> ---------------------------------------------------------------------------------------- <button>默认按钮</button> <a href=<span class="token string">"#"</span> class=<span class="token string">"button"</span>>链接按钮</a> <button class=<span class="token string">"button"</span>>按钮</button> <input type=<span class="token string">"button"</span> class=<span class="token string">"button"</span> value=<span class="token string">"输入框按钮"</span>> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2024/03/16/195818055.png" alt="在这里插入图片描述"></p> <ul><li>按钮颜色</li></ul> <pre data-index="45" class="set-code-hide prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector"><style> .button</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span> #4CAF50<span class="token punctuation">;</span> <span class="token comment">/* 绿色 */</span> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 15px 32px<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 4px 2px<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.button2</span> <span class="token punctuation">{<!-- --></span><span class="token property">background-color</span><span class="token punctuation">:</span> #008CBA<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* 蓝色 */</span> <span class="token selector">.button3</span> <span class="token punctuation">{<!-- --></span><span class="token property">background-color</span><span class="token punctuation">:</span> #f44336<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* 红色 */</span> <span class="token selector">.button4</span> <span class="token punctuation">{<!-- --></span><span class="token property">background-color</span><span class="token punctuation">:</span> #e7e7e7<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* 灰色 */</span> <span class="token selector">.button5</span> <span class="token punctuation">{<!-- --></span><span class="token property">background-color</span><span class="token punctuation">:</span> #555555<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* 黑色 */</span> </style> ----------------------------------------------------------------------------------------- <button class=<span class="token string">"button"</span>>Green</button> <button class=<span class="token string">"button button2"</span>>Blue</button> <button class=<span class="token string">"button button3"</span>>Red</button> <button class=<span class="token string">"button button4"</span>>Gray</button> <button class=<span class="token string">"button button5"</span>>Black</button> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2024/03/16/195818153.png" alt="在这里插入图片描述"></p> <ul><li>按钮大小</li></ul> <pre data-index="46" class="set-code-hide prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector"><style> .button</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span> #4CAF50<span class="token punctuation">;</span> <span class="token comment">/* Green */</span> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 15px 32px<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 4px 2px<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.button1</span> <span class="token punctuation">{<!-- --></span><span class="token property">font-size</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.button2</span> <span class="token punctuation">{<!-- --></span><span class="token property">font-size</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.button3</span> <span class="token punctuation">{<!-- --></span><span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.button4</span> <span class="token punctuation">{<!-- --></span><span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.button5</span> <span class="token punctuation">{<!-- --></span><span class="token property">font-size</span><span class="token punctuation">:</span> 24px<span class="token punctuation">;</span><span class="token punctuation">}</span> </style> --------------------------------------------------------------------------------------- <button class=<span class="token string">"button button1"</span>>10px</button> <button class=<span class="token string">"button button2"</span>>12px</button> <button class=<span class="token string">"button button3"</span>>16px</button> <button class=<span class="token string">"button button4"</span>>20px</button> <button class=<span class="token string">"button button5"</span>>24px</button> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2024/03/16/195818480.png" alt="在这里插入图片描述"></p> <ul><li>圆角按钮</li></ul> <pre data-index="47" class="set-code-hide prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector"><style> .button</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span> #4CAF50<span class="token punctuation">;</span> <span class="token comment">/* Green */</span> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 15px 32px<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 4px 2px<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.button1</span> <span class="token punctuation">{<!-- --></span><span class="token property">border-radius</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.button2</span> <span class="token punctuation">{<!-- --></span><span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.button3</span> <span class="token punctuation">{<!-- --></span><span class="token property">border-radius</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.button4</span> <span class="token punctuation">{<!-- --></span><span class="token property">border-radius</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.button5</span> <span class="token punctuation">{<!-- --></span><span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span><span class="token punctuation">}</span> </style> ------------------------------------------------------------------------------------- <button class=<span class="token string">"button button1"</span>>2px</button> <button class=<span class="token string">"button button2"</span>>4px</button> <button class=<span class="token string">"button button3"</span>>8px</button> <button class=<span class="token string">"button button4"</span>>12px</button> <button class=<span class="token string">"button button5"</span>>50%</button> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2024/03/16/195818471.png" alt="在这里插入图片描述"></p> <ul><li>按钮边框</li></ul> <pre data-index="48" class="set-code-hide prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector"><style> .button</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span> #4CAF50<span class="token punctuation">;</span> <span class="token comment">/* Green */</span> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 15px 32px<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 4px 2px<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.button1</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 2px solid #4CAF50<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.button2</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 2px solid #008CBA<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.button3</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 2px solid #f44336<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.button4</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 2px solid #e7e7e7<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.button5</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 2px solid #555555<span class="token punctuation">;</span> <span class="token punctuation">}</span> </style> --------------------------------------------------------------------------------------- <button class=<span class="token string">"button button1"</span>>Green</button> <button class=<span class="token string">"button button2"</span>>Blue</button> <button class=<span class="token string">"button button3"</span>>Red</button> <button class=<span class="token string">"button button4"</span>>Gray</button> <button class=<span class="token string">"button button5"</span>>Black</button> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li><li style="color: rgb(153, 153, 153);">45</li><li style="color: rgb(153, 153, 153);">46</li><li style="color: rgb(153, 153, 153);">47</li><li style="color: rgb(153, 153, 153);">48</li><li style="color: rgb(153, 153, 153);">49</li><li style="color: rgb(153, 153, 153);">50</li><li style="color: rgb(153, 153, 153);">51</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2024/03/16/195818471.png" alt="在这里插入图片描述"></p> <ul><li>按钮阴影</li></ul> <pre data-index="49" class="set-code-hide prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector"><style> .button</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span> #4CAF50<span class="token punctuation">;</span> <span class="token comment">/* Green */</span> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 15px 32px<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 4px 2px<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> <span class="token property">-webkit-transition-duration</span><span class="token punctuation">:</span> 0.4s<span class="token punctuation">;</span> <span class="token comment">/* Safari */</span> <span class="token property">transition-duration</span><span class="token punctuation">:</span> 0.4s<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.button1</span> <span class="token punctuation">{<!-- --></span> <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 8px 16px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.2<span class="token punctuation">)</span><span class="token punctuation">,</span> 0 6px 20px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.19<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">//hover 这个是有悬停阴影效果的 .button2:hover</span> <span class="token punctuation">{<!-- --></span> <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 12px 16px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.24<span class="token punctuation">)</span><span class="token punctuation">,</span>0 17px 50px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.19<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </style> ------------------------------------------------------------------------------------------- <button class=<span class="token string">"button button1"</span>>阴影按钮</button> <button class=<span class="token string">"button button2"</span>>鼠标悬停后出现阴影</button> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li></ul></pre> <p>效果：<br> <img src="https://1000bd.com/contentImg/2024/03/16/195818275.png" alt="在这里插入图片描述"></p> <ul><li>禁用按钮</li></ul> <pre data-index="50" class="set-code-hide prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector"><style> .button</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span> #4CAF50<span class="token punctuation">;</span> <span class="token comment">/* Green */</span> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 15px 32px<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 4px 2px<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.disabled</span> <span class="token punctuation">{<!-- --></span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0.6<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span> not-allowed<span class="token punctuation">;</span> <span class="token punctuation">}</span> </style> ------------------------------------------------------------------------------------- <button class=<span class="token string">"button"</span>>正常按钮</button> <button class=<span class="token string">"button disabled"</span>>禁用按钮</button> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2024/03/16/195818213.png" alt="在这里插入图片描述"></p> <ul><li>按钮宽度</li></ul> <pre data-index="51" class="set-code-hide prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector"><style> .button</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span> #4CAF50<span class="token punctuation">;</span> <span class="token comment">/* Green */</span> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 15px 32px<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 4px 2px<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.button1</span> <span class="token punctuation">{<!-- --></span><span class="token property">width</span><span class="token punctuation">:</span> 250px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.button2</span> <span class="token punctuation">{<!-- --></span><span class="token property">width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.button3</span> <span class="token punctuation">{<!-- --></span> <span class="token property">padding-left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding-right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token punctuation">}</span> </style> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2024/03/16/195818049.png" alt="在这里插入图片描述"></p> <ul><li>按钮组</li></ul> <pre data-index="52" class="set-code-hide prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector"><style> .button</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span> #4CAF50<span class="token punctuation">;</span> <span class="token comment">/* Green */</span> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 15px 32px<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.button:hover</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span> #3e8e41<span class="token punctuation">;</span> <span class="token punctuation">}</span> </style> ----------------------------------------------------------------------------------------- <button class=<span class="token string">"button"</span>>Button</button> <button class=<span class="token string">"button"</span>>Button</button> <button class=<span class="token string">"button"</span>>Button</button> <button class=<span class="token string">"button"</span>>Button</button> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2024/03/16/195818130.png" alt="在这里插入图片描述"></p> <ul><li>带边框按钮组</li></ul> <pre data-index="53" class="set-code-show prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">.button</span> <span class="token punctuation">{<!-- --></span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid green <span class="token punctuation">}</span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2024/03/16/195818136.png" alt="在这里插入图片描述"></p> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1153776">pytorch深度学习实战lesson27</a> <br /> <a href="/Article/Index/1039915">【Dubbo3高级特性】「框架与服务」 服务分组及服务分组聚合实现</a> <br /> <a href="/Article/Index/1296575">新版发布 | Cloudpods v3.10.5 和 v3.9.13 正式发布</a> <br /> <a href="/Article/Index/1397591">DOS常用指令</a> <br /> <a href="/Article/Index/1446819">软件测试/测试开发丨接口自动化测试学习笔记，加密与解密</a> <br /> <a href="/Article/Index/1355110">springboot单独在指定地方输出sql</a> <br /> <a href="/Article/Index/841505">vue3: 2.如何利用 effectScope 自己实现一个青铜版pinia 一 actions篇</a> <br /> <a href="/Article/Index/763571">Hive调优总结（三）-语法和运行参数层面</a> <br /> <a href="/Article/Index/1687572">Unity API学习之消息机制理论与应用</a> <br /> <a href="/Article/Index/1015956">springboot2.0+vue 详细整合UEditor教程</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/qq_42757964/article/details/133207327 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/1906469">【JVM】编译执行与解释执行的区别是什么？JVM 使用哪种方式？</a> <br /> <a href="/Article/Index/1907193">用 Hashids 优雅解决 C 端自增 ID 暴露问题</a> <br /> <a href="/Article/Index/1907195">V8引擎 精品漫游指南--Ignition篇(上) 指令 栈帧 槽位 调用约定 内存布局 基础内容</a> <br /> <a href="/Article/Index/1907196">LLVM Pass快速入门(四)：代码插桩</a> <br /> <a href="/Article/Index/1907197">milkup：桌面端 markdown AI续写和即时渲染</a> <br /> <a href="/Article/Index/1907198">基于项目工程构建SBOM（软件物料清单）的研究</a> <br /> <a href="/Article/Index/1907199">鸿蒙应用开发UI基础第二节：鸿蒙应用程序框架核心解析与实操</a> <br /> <a href="/Article/Index/1907200">.NET 中如何快速实现 List 集合去重？</a> <br /> <a href="/Article/Index/1907201">扣子Coze实战：从0到1打造抖音+小红书热点监控智能体</a> <br /> <a href="/Article/Index/1907202">浅谈数据访问层</a> <br /> </nobr> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/888177">十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！</a> <br /> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br /> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br /> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br /> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br /> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br /> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br /> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br /> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br /> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br /> </nobr> </li> </ul> </div> </div> </div> <!-- 主体 --> <!--body结束--> <!--这里是footer模板--> <!--footer--> <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <div style="padding:0px 5px;"> <a href="/tools">小工具</a> <a href="https://games.1000bd.com">小游戏</a> </div> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style=" padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a> </div> </div> </div> </div> </nav> <!--footer--> <!--footer模板结束--> <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script> <!--这里是scripts模板--> <!--scripts模板结束--> </body> </html>
