如何利用HTML5和CSS3设置四边边框border边界线

作者:烟中隐约闪现 | 创建时间: 2023-08-13
CSS3边框border,可以设置其样式、颜色和宽度,边框粗细等,其中边框border有 border-bottom border-top border-left border-right 下面利用四个div元素分别使用上述四个边框,操作如...
如何利用HTML5和CSS3设置四边边框border边界线

操作方法

第一步,在HBuilder开发工具创建静态页面border.html,并修改title内容,如下图所示:

第二步,在body元素内插入五个div,其中一个div包裹另外四个div,如下图所示:

第三步,添加第一个div样式 .one{ width: 400px; height: 100px; color: #FF0000; border-width: 2px; border-bottom: 1px solid #D2691E; } 如下图所示:

第四步,添加第二个div元素,设置顶部边框样式 .two{ width: 400px; height: 100px; color: #000000; border-width: 3px; border-top: 1px dashed #7FFFD4; } 如下图所示:

第五步,添加第三个div样式,设置左边框样式, .three{ width: 400px; height: 100px; color: #ED9898; border-width: 4px; border-left: 1px dotted #8A2BE2; } 如下图所示:

第六步,设置最后一个div元素,设计右边框样式、颜色和宽度, .four{ width: 400px; height: 100px; color: #DEB887; border-width: 5px; border-right: 1px double darkcyan; } 如下图所示:

温馨提示

注意border边框设置样式、颜色和宽度
注意border定义网页区域
点击展开全文

更多推荐