在html中如何设置底部边框

1、首先新建一个html文件，输入基本的内容，这里设置一个div，并把它的class设置为demo，用浏览器打开看看默认的效果：

2、设置div的样式，这里给div300px的宽度。用border-bottom属性，设置底框为3像素，用实线框，颜色偏红色，设置完成后保存查看效果：

3、继续对边框美化，用box-shadow属性加入阴影效果，4个数值分别为垂直阴影，水平阴影，阴影尺寸，阴影颜色；设置阴影圆角为4em，最后按下crtl+s保存，在左边的浏览器就可以看见边框新的效果了：

HTML中设置边框方法：

方法/步骤

1、一个普通的表格如下：

相关设置

2、单元格边距(表格填充)(cellpadding) -- 代表单元格外面距离,用于隔开单元格与单元格之间的空间 单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离。

具体代码如下：

<table border='1'cellspacing="0" cellpadding="0" > <tr> <td width="200">1</td> <td width="200">2</td> <td width="200">3</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>中国</td> <td>我</td> <td>爱你</td> </tr> </table>

效果如图

文字不居中？

3、设置一下就好了。

代码如下：

<style type="text/css">.onecenter{text-align:centerwidth:200px}</style><table border='1'cellspacing="0" cellpadding="0" > <tr> <td class='onecenter'>1</td> <td class='onecenter'>2</td> <td class='onecenter'>3</td> </tr> <tr> <td class='onecenter'>a</td> <td class='onecenter'> b</td> <td class='onecenter' > c</td> </tr > <tr> <td class='onecenter' >中国</td> <td class='onecenter' >我</td> <td class='onecenter' >爱你</td> </tr> </table>

4、为了方便一点我直接把样式写在上面了。

效果如图：

5、每一个表格都是一个完整的方框，如果想要线条更细。

6、看如下代码：

<style type="text/css">.onecentertext-align:centerwidth:200pxheight:50px}#sebackground-color:#006699 padding:20pxcolor:#FFF}</style><table border='1'cellspacing="0" cellpadding="20" > <tr> <td class='onecenter'>1</td> <td class='onecenter' style='border-left:0pxborder-right:0px'  >2</td> <td class='onecenter'>3</td> </tr> <tr> <td class='onecenter'>a</td> <td class='onecenter' style='border:0px'> b</td> <td class='onecenter' > c</td> </tr > <tr id='se'> <td class='onecenter' >中国</td> <td class='onecenter' >我</td> <td class='onecenter' >爱你</td> </tr> </table>

7、这段代码主要是针对某些表格做了些设置，让某些表格不显示出来。

要给盒子设置下边框15像素,双实线黄色的边框，可以使用HTML的style属性进行设置，具体方法如下：

<style>.box { border-bottom: 15px solid yellow border-bottom-style: double

}</style>

或者也可以直接在HTML元素的style属性中进行设置，如：

<div style="border-bottom: 15px solid yellowborder-bottom-style: double">这是一个盒子</div>

在这种情况下，border-bottom属性用于设置下边框的宽度和颜色，border-bottom-style属性用于设置下边框的样式，double值表示双实线。

注意：这里的颜色值可以是颜色名称（如yellow），也可以是十六进制颜色值（如#FFFF00）或RGB颜色值（如rgb(255, 255, 0)）。

---