<tbody>
<tr>
<td id="artContent" style="max-width: 656px;">
<div style="width: 656px; margin: 0; padding: 0; height: 0;"></div>
<p style="text-align:center;"><br></p><div><div><div><div><div><div><div><p>今</p></div></div><div><div><p>日</p></div></div><div><div><p>鸡</p></div></div><div><div><p>汤</p></div></div></div></div><div style="text-align:center;">醉和金甲舞，雷鼓动山川。</div></div></div></div><p>CSS边框属性允许您定义框的边框区域。边框可以是预定义的样式，例如实线，双线，虚线等，[也可以是图像]，定义边框的样式（border-style），颜色（border-color）和厚度（border-width）。</p><h4 style="font-weight:bold;">1. 边框宽度属性(border-width)</h4><p>border-width属性指定边框区域的宽度。用于同时设置元素边框的所有四个边的厚度。</p><p>例</p><div><ul><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li></ul><pre></pre></div><p style="text-align:center;"><img doc360img-src='http://image109.360doc.com/DownloadImg/2023/02/1017/260432787_1_2023021005065367_wm.png' src="http://image109.360doc.com/DownloadImg/2023/02/1017/260432787_1_2023021005065367_wm.png"></p><p><strong>注：</strong><br></p><p>如果border-width缺少或未指定属性值，border-width则将使用的默认值（medium）。</p><h4 style="font-weight:bold;">2. 边框样式属性 (border-style)</h4><p>该border-style属性设置框边框的样式。它是用于设置元素边框所有四个侧面的线型的简写速记属性。</p><p>该border-style属性可采取以下值之一：none，hidden，dashed，dotted，double，groove，inset，outset，ridge和solid 。</p><p>例：</p><div><ul><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li></ul><pre></pre></div><p style="text-align:center;"><img doc360img-src='http://image109.360doc.com/DownloadImg/2023/02/1017/260432787_2_20230210050653333_wm.png' src="http://image109.360doc.com/DownloadImg/2023/02/1017/260432787_2_20230210050653333_wm.png"></p><h4 style="font-weight:bold;">3. 边框颜色属性 (border-color)<br></h4><p>该<strong>border-color</strong>属性指定<strong>color</strong>框的边框。这也是用于设置元素边框所有四个侧面的颜色的简写属性。</p><p>例：</p><div><ul><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li></ul><pre></pre></div><p><strong>注意：</strong></p><p>border-color如果单独使用该属性，则该属性将不起作用。</p><p>使用border-style属性首先设置边框。</p><p>该<strong>border</strong>CSS属性是设置一个或多个单独的边框属性的速记属性border-style，border-width和border-color在一个单一的规则。</p><p>例：</p><div><ul><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li></ul><pre><!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS边框速记属性</title><style>p {border: 5px solid #ff4500;}</style></head><body style="background-color: aqua;"><p>这是一个段落.</p></body></html></pre></div><p style="text-align:center;"><img doc360img-src='http://image109.360doc.com/DownloadImg/2023/02/1017/260432787_3_20230210050653755_wm.png' src="http://image109.360doc.com/DownloadImg/2023/02/1017/260432787_3_20230210050653755_wm.png"></p><p>如果在设置border速记属性时忽略或未指定单个border属性的值，则将使用该属性的默认值（如果有）。<br></p><p><strong>注：</strong></p><p><strong>border-color</strong>在设置元素的边框时，如果缺少属性值或未指定属性值（例如border: 5px solid;），则该元素的<strong>color</strong>属性将用作的值border-color。</p><p>在此例中，边框将是宽度为5px的黑色实线。</p><p>例：</p><div><ul><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li></ul><pre><style> p {color: black;border: 5px solid;}</style></pre></div><p style="text-align:center;"><img doc360img-src='http://image109.360doc.com/DownloadImg/2023/02/1017/260432787_4_20230210050653959_wm.png' src="http://image109.360doc.com/DownloadImg/2023/02/1017/260432787_4_20230210050653959_wm.png"></p><p>但是，在有border-style属性的情况下，省略该值将不会显示任何边框，因为这个时候border-style属性 的默认值为none。<br></p><p>在下面的例子中，将没有边框：</p><div><ul><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li><li><p><br></p></li></ul><pre><style> p { border: 5px #00ff00;}</style></pre></div><p><img doc360img-src='http://image109.360doc.com/DownloadImg/2023/02/1017/260432787_5_20230210050654255_wm.png' src="http://image109.360doc.com/DownloadImg/2023/02/1017/260432787_5_20230210050654255_wm.png" style="text-align:center;"></p><p>本文基于CSS基础，介绍了关于边框的相关属性，定义边框的宽度，边框的颜色，边框的样式。对每一种属性通过案例详细的讲解。</p><p>欢迎大家积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。</p><p>代码很简单，希望能够帮助读者更好的去学习。</p><p style="text-align:center;"><strong><strong><strong><strong><strong>---</strong>--<strong><strong><strong><strong><strong><strong>---</strong></strong>---<strong><strong><strong><strong><strong>---</strong>--<strong><strong><strong><strong><strong><strong>---</strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong>End <strong><strong><strong><strong><strong>---</strong>--<strong><strong><strong><strong><strong><strong>---</strong>--</strong>---<strong><strong><strong><strong><strong>---</strong>--<strong><strong><strong><strong><strong><strong>-</strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></p>
</td>
</tr>
</tbody>
讯享网
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/197759.html