美文网首页
CSS设置盒子边框

CSS设置盒子边框

作者: 潇洒的小老虎 | 来源:发表于2018-05-11 10:13 被阅读0次
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            /*border-width: 1px;*/
            /*border-color: red;*/
            /*border-style: solid;*/
            /*border-style: dashed;  虚线*/
            /*border-style: dotted;   点线*/
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

边框可以拆分

border-top: 1px solid red;   /*top 上  bottom  下  left  左  right  右*/

合并相邻边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        table {
            width: 500px;
            height: 300px;
            border: 1px solid red;
        }
        td {
            border: 1px solid red;
            text-align: center;
        }
        table, td {
            border-collapse: collapse;  /*合并相邻边框*/
        }
    </style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
    <tr>
        <td>天王盖地虎</td>
        <td>天王盖地虎</td>
        <td>天王盖地虎</td>
    </tr>
    <tr>
        <td>宝塔镇河妖</td>
        <td>宝塔镇河妖</td>
        <td>宝塔镇河妖</td>
    </tr>
    <tr>
        <td>小鸡炖蘑菇</td>
        <td>小鸡炖蘑菇</td>
        <td>小鸡炖蘑菇</td>
    </tr>
</table>
</body>
</html>

相关文章

  • CSS学习笔记之定位

    CSS的盒子及相关 盒子基础 postion,float,display——版式 边框(border)。可以设置...

  • 第四天

    css盒子模型设置边框:border-top-color:red; /* 设置顶部边框颜色为红色 /bord...

  • CSS设置盒子边框

    边框可以拆分 合并相邻边框

  • 2018-06-05

    css盒子模型的一些用法 边框border 1、border-width: 设置边框宽度 2、border-s...

  • CSS-2

    继续上一节的CSS基础后,我们来看CSS的一些高级设置。 CSS盒子模型 1、盒子模型之边框 注意:复合样式顺序为...

  • 盒子模型

    网页布局的本质: 1、用css设置好盒子的大小,摆放盒子的位置 2、将网页元素放入盒子里面 盒子模型由内容、边框、...

  • CSS盒子模型、定位、浮动

    CSS盒子模型概述 CSS内边距 CSS边框: CSS外边距 CSS定位: CSS浮动:

  • CSS 盒子模型

    CSS盒子模型 盒子模型边框 CSS盒子模型的宽度和高度 CSS模型的填充 CSS盒子模型的边界 填充和边界的区别

  • CSS 盒子模型

    目录: CSS 盒子模型(Box Model) CSS 边框 CSS 轮廓 CSS Margin(外边距) CSS...

  • 十九、圆角边框&盒子阴影

    一、 圆角边框(重点) 在CSS3中,新增了样式,这样我们的盒子就可以变圆角了。 属性用于设置元素的外边框圆角。 ...

网友评论

      本文标题:CSS设置盒子边框

      本文链接:https://www.haomeiwen.com/subject/abaxdftx.html