CSS中如何设置div的边框

您可以根据自己的需要,对div进行设置它的边框样式,或是隐藏掉div的边框。而在开发过程中,您如果使用得当div,它将给您的开发带来很大的便捷。

操作方法

  • 01

    首先,您需要创建一个div,对div进行添加一个class。我们利用CSS通过class来设置div的边框。

  • 02

    创建一个用于设置边框的CSS文件,对于您实际开发中,将边框添加到您的CSS文件中即可。

  • 03

    在CSS文件中设置DIV的边框,首先我们可以先给div一个宽度与高度。

  • 04

    得到了宽度与高度后,如果我们没有边框,是看不到样式的。如果您的div中有内容,那么只是显示那些内容而已。

  • 05

    接下来,添加一个border边框

  • 06

    我们将边框设置为1px.如果只是设置了宽度而没有设置颜色与具体的显示样式的话,边框并不会显示,您现在可以刷新一下您的页面看一下,添加了border:1px后是否显示,答案是肯定不显示的,因为我们参数没有写完整。

  • 07

    参加第二个参数颜色值,具体的颜色您可以搜索具体的样式值的代码,您可以使用基本色直接使用单词拼写也是可以的。

  • 08

    最后一个参数是显示样式,您可以选择不同的样式来进行显示,我们这里使用的是实线的方式来实现。

  • 09

    如果您使用的是一些专门用来做前端开发的软件,您输入后,会有一些提示,您如果选择不同样式来试一试看。

  • 10

    添加了上述的三个属性后,您的div边框即可显示出来了。

  • 11

    您可以根据您的需求,对边框做其他操作。

(0)

相关推荐

  • word中怎么设置表格的边框线样式和颜色

    今天小编给大家分享的是word中怎么设置表格的边框线样式和颜色,希望能够帮助到大家. 操作方法 01 首先,我们打开一个空白的word文档,插入表格,如图. 02 插入表格后,选中表格点击鼠标右键,选 ...

  • 怎样为word中表格设置漂亮的边框

    word经常插入表格,但是默认的表格边框比较呆板,不大美观,这对于经常出墙报.编辑刊物的文艺青年很不喜欢,那么如何给表格设置漂亮的边框呢,其实步骤很简单,方法如下: 操作方法 01 新建文件,点击&q ...

  • css样式如何设置div元素水平垂直居中的三种方法

    CSS实现绝对定位元素的居中效果,有时候需要把一个元素进行居中,在这里讲解三种方法,各种方法有它的优缺点. 操作方法 01 1.建立txt文档,更改后缀名为html,如图: 02 2.右击html文件 ...

  • css中如何使div居中(垂直水平居中)

    操作方法 01 如何使DIV居中,div垂直居中,div水平居中. 主要的样式定义如下: body {TEXT-ALIGN: center;} #center { MARGIN-RIGHT: auto ...

  • css中如何设置让鼠标经过文字左侧显示图片

    在css当中如何写让一个鼠标经过显示图标的应用见过的不多,但是也有人要求这样写,既然有人要求这样写了,我们就试试这种结果的写法. 操作方法 01 首先我们先写内容,我们想要的是,一行文字,下面是一个横 ...

  • 如何用CSS设置DIV边框透明

    如何实现用CSS设置DIV边框为透明呢?我们来看一看. 操作方法 01 透明一般认为是一种颜色属性,但是并没有这个数值.我们找到了一种让div实现透明的最佳方案,运用RGBA 02 RGBA在RGB的 ...

  • css设置div在网页中垂直居中

    css设置div在网页中垂直居中方法很多,这是本人常用的方法 我们要做一个在网页中垂直水平方向都居中的一个div来作一个如下效果的框 操作方法 01 本实例以新文档开始 02 先放置一个div,并且设 ...

  • 使用CSS设置div水平居中

    在网页编辑中,我们常常使用div来进行网页的布局.但是如何使div水平居中呢?我认为这一种方法比较于其他的方法更好用一些(个人建议). 准备工作 01 打开sublime text3,并且新建一个ht ...

  • css如何根据屏幕宽度设置div高度

    css如何根据屏幕宽度设置div高度 操作方法 01 首先创建或者打开我们的web项目,新建一个html文件和css文件即可,如图所示 02 html页面代码如图所示,定义一个div,然后给一个id属 ...