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

CSS3边框border,可以设置其样式、颜色和宽度,边框粗细等,其中边框border有
border-bottom
border-top
border-left
border-right
下面利用四个div元素分别使用上述四个边框,操作如下:

操作方法

  • 01

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

  • 02

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

  • 03

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

  • 04

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

  • 05

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

  • 06

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

(0)

相关推荐

  • 怎样在Word2003文档中设置段落边框

    在使用Word2003编辑文档的过程中,有时需要为段落设置边框。例如当需要在文档标题和正文之间添加一条分割线时,则可以借助段落边框功能实现这个目的,操作步骤如下所述: 第1步,打开Word2003文档 ...

  • 在word2010中如何设置表格边框底纹

    在Word2010中,用户不仅可以在“表格工具”功能区设置表格边框,还可以在“边框和底纹”对话框设置表格边框,操作步骤如下所述: 第1步,打开Word2010文档窗口,在Word表格中选中需要设置边框 ...

  • excel利用添加辅助列设置countif筛选重复数据(值)

    利用在名字列右边插入辅助列,在辅助列与名字同行输入公式=COUNTIF(E$2:E2,E2)返回该同行名字从首个名字到当前行出现次数,在复制公式,为辅助列设置自动筛选,2代表出现两次的名字,3代表出现 ...

  • Word2007怎么设置图片边框

    俗话说人靠衣装,而美丽的图片,如果架上边框的话,会更加地完美.在Word2007文档中,我们知道有边框和底纹的设置,而在图片中,也为用户提供了多种颜色.多种粗细尺寸的实线边框或虚线边框. 第1步,打开 ...

  • Word2007怎么设置表格边框

    在Word2007文档中插入表格并进行录入数据,而有些朋友有时为了工作的要求,要将表格的边框进行设置,那么这时,就要用到"表格工具"功能区中设置表格边框,或者在"边框和底 ...

  • 光影魔术手如何设置花样边框

    光影魔术手如何设置花样边框

  • excel中怎么利用缩放功能快速设置打印页面?

    excel中怎么利用缩放功能快速设置打印页面?高效的利用页面设置,进行打印不仅能够提高工作效率,更能够节约纸张. 1.在打印的过程中,经常遇到这样的情况,页面设置好后,打印预览之后会发现,最后一页只有 ...

  • word2013设置表格边框的方法汇总

    如何设置表格边框吧! 设置表格边框方法一:使用预设的边框样式 1将鼠标光标定位到表格中,然后在表格工具"设计"选项卡"边框"组,单击"边框样式&quo ...

  • 如何在Word2010文档中设置图片边框

    在Word2010文档中,用户可以为选中的图片设置多种颜色.多种粗细尺寸的实线边框或虚线边框.实际上,当用户使用Word2010预设的图片样式时,某些样式已经应用了图片边框.当然,用户也可以根据实际需 ...