搜索文档
首页
HTML/CSS
JavaScript
服务端开发
Java教程
移动端
数据库
当前位置:
首页
HTML/CSS
CSS 教程
CSS 盒子模型
源代码
清空
点击运行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example of CSS border-width property</title> <style> p.one { border-style: solid; border-width: 5px; } p.two { border-style: solid; border-width: 5px 10px; } p.three { border-style: solid; border-width: 5px 10px 15px; } p.four { border-style: solid; border-width: medium 10px thick 15px; } </style> </head> <body> <p class="one"> <strong>单值语法：</strong>：单个值设置所有四个边框的宽度。</p> <p class="two"> <strong>二值语法：</strong>第一个值设置上下边框的宽度，第二个值设置左右边框的宽度。</p> <p class="three"> <strong>三值语法</strong>：第一个值设置顶部边框的宽度，第二个值设置左右边框的宽度，第三个值设置 底部边框的宽度。</p> <p class="four"> <strong>四值语法</strong>：每个值都按上，右，下和左的顺序分别设置边框的宽度。</p> <p> <strong>注意</strong>：您必须在<code> border-width </code>属性之前声明<code> border-style </code>属性。 元素必须具有边框，然后才能设置边框的宽度。</p> </body> </html>
运行结果
