how2j.cn

关键字 简介 示例代码
border-style
边框风格
示例代码
border-color
边框颜色
示例代码
border-width
边框宽度
示例代码
border
都放在一起
示例代码
border-top
只有一个方向有边框
示例代码
border-top,border-left
有交界的边都有边框
示例代码
div
span
块级元素和内联元素的边框区别
示例代码
练习-表格斑马线
示例代码
答案-表格斑马线
示例代码
练习-美人尖
示例代码
答案-美人尖
示例代码
练习-断线下划线
示例代码
答案-断线下划线
示例代码
示例 1 : 边框风格   
示例 2 : 边框颜色   
示例 3 : 边框宽度   
示例 4 : 都放在一起   
示例 5 : 只有一个方向有边框   
示例 6 : 有交界的边都有边框   
示例 7 : 块级元素和内联元素的边框区别   
示例 8 : 练习-表格斑马线   
示例 9 : 答案-表格斑马线   
示例 10 : 练习-美人尖   
示例 11 : 答案-美人尖   
示例 12 : 练习-断线下划线   
示例 13 : 答案-断线下划线   

属性: border-style
solid: 实线
dotted:点状
dashed:虚线
double:双线
运行效果
<style> .solid{ border-style:solid; } .dotted{ border-style:dotted; } .dashed{ border-style:dashed; } .double{ border-style:double; } </style> <div> 默认无边框div </div> <div class="solid"> 实线边框 </div><br/> <div class="dotted"> 点状边框 </div> <br/> <div class="dashed"> 虚线边框 </div> <br/> <div class="double"> 双线边框 </div> <br/>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
属性:border-color
值:red,#ff0000,rgb(255,0,0)
运行效果
<style> .red{ border-style:solid; border-color:red; } </style> <div> 默认无边框div </div> <div class="red"> 实线红色边框 </div><br/>
<style>
.red{
   border-style:solid;
   border-color:red;
}

</style>

<div> 默认无边框div </div>

<div class="red"> 实线红色边框  </div><br/>



源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
属性:border-width
值:数字
运行效果
<style> .red{ border-style:solid; border-color:red; border-width:1px; } .default{ border-style:solid; border-color:red; } </style> <div> 默认无边框div </div> <div class="red"> 实线红色细边框 </div><br/> <div class="default"> 实线红色默认宽度边框 </div><br/>
<style>
.red{
   border-style:solid;
   border-color:red;
   border-width:1px;
}

.default{
   border-style:solid;
   border-color:red;
}

</style>

<div> 默认无边框div </div>

<div class="red"> 实线红色细边框  </div><br/>

<div class="default"> 实线红色默认宽度边框  </div><br/>



源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
属性:border
值:颜色 风格 宽度
运行效果
<style> .red{ border:1px dotted LightSkyBlue; } </style> <div> 默认无边框div </div> <div class="red"> 点状天蓝色细边框 </div><br/>
<style>
.red{
   border:1px dotted LightSkyBlue;
}

</style>

<div> 默认无边框div </div>

<div class="red"> 点状天蓝色细边框  </div><br/>



源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 5 :

只有一个方向有边框

edit
通过制定位置,可以只给一个方向设置边框风格,颜色和宽度

border-top-style:solid;
border-top-color:red;
border-top-width: 50px;

top,bottom,left,right 分别对应上下左右
运行效果
<style> div{ width:150px; height:150px; border-top-style:solid; border-top-color:red; border-top-width: 50px; background-color:lightgray; } </style> <div> 只有上面有边框 </div>
<style>
 div{
   width:150px;
   height:150px;
   border-top-style:solid;
   border-top-color:red;
   border-top-width: 50px;
   background-color:lightgray;   
  }
</style>

<div>
只有上面有边框
</div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 6 :

有交界的边都有边框

edit
比如上和左就是有交界的,而上和下就没有交界

当有交界的边同时出现边框的时候,就会以倾斜的形式表现交界线。
运行效果
<style> div.lefttop{ width:150px; height:150px; border-top-style:solid; border-top-color:red; border-top-width: 50px; border-left-style:solid; border-left-color:blue; border-left-width: 50px; background-color:lightgray; } div.alldirection{ width:150px; height:150px; border-top-style:solid; border-top-color:red; border-top-width: 50px; border-left-style:solid; border-left-color:blue; border-left-width: 50px; border-bottom-style:solid; border-bottom-color:green; border-bottom-width: 50px; border-right-style:solid; border-right-color:yellow; border-right-width: 50px; background-color:lightgray; } </style> <div class="lefttop"> 左边和上边都有边框 </div> <br> <div class="alldirection"> 四边都有边框  </div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 7 :

块级元素和内联元素的边框区别

edit
可以看到,块级元素div默认是占用100%的宽度
常见的块级元素有div h1 p 等
而内联元素span的宽度由其内容的宽度决定
常见的内联元素有 a b strong i input 等
运行效果
<style> .red{ border:1px solid red; } </style> <div> 默认无边框div </div> <div class="red"> 实线红色细边框 </div><br/> <span class="red"> 实线红色细边框 </span><br/>
<style>
.red{
   border:1px solid red;
}

</style>

<div> 默认无边框div </div>

<div class="red"> 实线红色细边框  </div><br/>
<span class="red"> 实线红色细边框  </span><br/>



源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 8 :

练习-表格斑马线

edit Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
<style> table{ border-collapse:collapse; width:90%; } tr.odd{ background-color:#f8f8f8; } tr.head{ border-bottom-width: 2px; } tr{ border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: lightgray; height:35px; } td{ width:25%; text-align:center; } </style> <table> <tr class="head"> <td>id</td> <td>名称</td> <td>血量</td> <td>伤害</td> </tr> <tr class="odd"> <td>1</td> <td>gareen</td> <td>340</td> <td>58</td> </tr> <tr class="even"> <td>2</td> <td>teemo</td> <td>320</td> <td>76</td> </tr> <tr class="odd"> <td>3</td> <td>annie</td> <td>380</td> <td>38</td> </tr> <tr class="even"> <td>4</td> <td>deadbrother</td> <td>400</td> <td>90</td> </tr> </table>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 9 :

答案-表格斑马线

edit
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
查看本答案会花费3个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
查看本答案会花费3个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
账号未激活 账号未激活,功能受限。 请点击激活
运行效果
<style> table{ border-collapse:collapse; width:90%; } tr.odd{ background-color:#f8f8f8; } tr.head{ border-bottom-width: 2px; } tr{ border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: lightgray; height:35px; } td{ width:25%; text-align:center; } </style> <table> <tr class="head"> <td>id</td> <td>名称</td> <td>血量</td> <td>伤害</td> </tr> <tr class="odd"> <td>1</td> <td>gareen</td> <td>340</td> <td>58</td> </tr> <tr class="even"> <td>2</td> <td>teemo</td> <td>320</td> <td>76</td> </tr> <tr class="odd"> <td>3</td> <td>annie</td> <td>380</td> <td>38</td> </tr> <tr class="even"> <td>4</td> <td>deadbrother</td> <td>400</td> <td>90</td> </tr> </table>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 10 :

练习-美人尖

edit Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
借助边框,实现美人尖的效果。 其实就是倒三角
<style> div{ width:0px; height:0px; border-top-style:solid; border-top-color:red; border-top-width: 10px; border-left-style:solid; border-left-color:white; border-left-width: 10px; border-bottom-style:solid; border-bottom-color:white; border-bottom-width: 10px; border-right-style:solid; border-right-color:white; border-right-width: 10px; } </style> <div > </div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 11 :

答案-美人尖

edit
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
查看本答案会花费3个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
查看本答案会花费3个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
账号未激活 账号未激活,功能受限。 请点击激活
dfs
运行效果
<style> div{ width:0px; height:0px; border-top-style:solid; border-top-color:red; border-top-width: 10px; border-left-style:solid; border-left-color:white; border-left-width: 10px; border-bottom-style:solid; border-bottom-color:white; border-bottom-width: 10px; border-right-style:solid; border-right-color:white; border-right-width: 10px; } </style> <div > </div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 12 :

练习-断线下划线

edit Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
<style> table{ width:100%; } table td{ text-align:center; } table tr.rowborder td{ background-color: #b2d1ff; border-right: 2px solid #fff; height: 3px; } </style> <table> <tr> <td>商品</td> <td>数量</td> <td>价格</td> <td>小记</td> </tr> <tr class="rowborder"> <td></td> <td></td> <td></td> <td></td> </tr> </table>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 13 :

答案-断线下划线

edit
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
查看本答案会花费4个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
查看本答案会花费4个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
账号未激活 账号未激活,功能受限。 请点击激活
运行效果
<style> table{ width:100%; } table td{ text-align:center; } table tr.rowborder td{ background-color: #b2d1ff; border-right: 2px solid #fff; height: 3px; } </style> <table> <tr> <td>商品</td> <td>数量</td> <td>价格</td> <td>小记</td> </tr> <tr class="rowborder"> <td></td> <td></td> <td></td> <td></td> </tr> </table>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2019-09-22 交作业 斑马线、美人尖和断线下划线
暴富



交作业
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框练习</title>
</head>
<style>
    table{
        width:500px;
    }
    .tablehead{
        border-bottom:lightgray 2px solid;
        /*width: 500px;*/
        text-align: center;
    }
    .graytable{
        border-bottom:lightgray 1px solid;
        /*width: 500px;*/
        text-align: center;
        background: antiquewhite;
    }
    .whitetable{
        border-bottom:lightgray 1px solid;
        /*width: 500px;*/
        text-align: center;
    }
    .tdtest{
        border-bottom: 2px solid dodgerblue;
        text-align: center;
    }
    div{

        width:0;
        height: 0;
        border:white 10px solid;
        border-top: red 10px solid;
    }

</style>
<body>
    <table class="tablehead">
        <tr>
            <td>id</td><td>名称</td><td>血量</td><td>伤害</td>
        </tr>
    </table>
    <table class="graytable">
        <tr>
            <td>1</td><td>名称</td><td>血量</td><td>伤害</td>
        </tr>
    </table>
    <table class="whitetable">
        <tr>
            <td>2</td><td>名称</td><td>血量</td><td>伤害</td>
        </tr>
    </table>
    <table class="graytable">
        <tr>
            <td>3</td><td>名称</td><td>血量</td><td>伤害</td>
        </tr>
    </table>
    <table class="whitetable">
        <tr>
            <td>4</td><td>名称</td><td>血量</td><td>伤害</td>
        </tr>
    </table>
    <h3>
        <b>美人尖:</b>
    </h3>
    <div>

    </div>
    <h3>
        <b>断线效果:</b>
    </h3>
    <table>
        <tr>
            <td class="tdtest">商品</td> <td class="tdtest">数量</td><td class="tdtest">价格</td>
            <td class="tdtest">小记</td>
        </tr>
    </table>

</body>
</html>

							


1 个答案

duan2533122 答案时间:2019-09-22
断线代码



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2019-08-28 美人尖
孙太阳
为什么div长宽设置为0?




1 个答案

ether 答案时间:2019-08-31
按照默认长度图形会变成梯形,所以要设置为0。



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2019-08-26 断线下划线----精简代码实现
2019-08-26 表格斑马线----详解
2019-08-26 表格斑马线----详解
2019-08-26 美人尖---精简代码
2019-08-22 表格斑马线、美人尖
2019-08-15 菜鸟求助
2019-08-13 最后一题答案参考-。-
2019-08-02 交作业 断线下划线
2019-07-17 ZZ交作业 CSS边框部分
2019-07-10 表格斑马线
2019-07-10 表格斑马线
2019-07-10 断线下划线
2019-07-10 表格斑马线
2019-06-17 美人尖
2019-06-06 下三角
2019-06-06 作业
2019-05-24 交作业 美人尖
2019-05-22 交作业 美人尖
2019-04-26 断线下划线 作业
2019-04-26 美人尖
2019-04-26 作业,表格斑马线
2019-03-10 美人尖
2019-03-10 斑马线作业
2019-02-12 交作业——表格斑马线
2019-01-22 作业:美人尖
2019-01-17 交作业-断线下划线
2019-01-17 交作业-美人尖
2019-01-17 交作业-表格斑马线ヾ(๑╹◡╹)ノ"
2019-01-10 作业:表格斑马线
2019-01-10 作业:断线下划线
2019-01-10 作业:表格斑马线
2019-01-10 作业:美人尖
2019-01-10 美人尖
2019-01-10 作业:表格斑马线
2019-01-10 作业:表格斑马线
2018-12-24 作业美人尖
2018-12-17 交作业 断线下划线
2018-12-17 交作业 断线下划线
2018-12-17 交作业 美人尖
2018-12-17 交作业斑马线
2018-11-21 交作业:断线下划线
2018-11-21 利用margin-right属性怎么实现不了断下划线?
2018-11-14 交作业——断线下划线
2018-11-01 间隔线作业
2018-11-01 交作业美人尖
2018-11-01 斑马线作业
2018-09-19 交作业 斑马线练习
2018-09-19 交作业
2018-09-14 交作业
2018-09-07 交作业
2018-09-02 交作业 美人尖
2018-08-23 下三角不需要底部边框吧?
2018-07-07 关于断线下划线的间距问题
2018-07-06 为什么我的代码总是比别人短,但是效果一样的啊
2018-07-06 下三角,自己的答案
2018-06-29 供参考
2018-04-21 死歌是deadbrother?我书读得少,别骗我......
2018-04-11 只有一行 设置下边框
2018-04-02 断线下划线
2018-03-16 斑马线,选择器也有优先级对不对,所以最后显示的是tr.head的效果而不是tr的
2018-01-28 内联元素 i 和啥有关?
2018-01-19 tr.odd和tr.head选择器放在tr后面就不起效果了
2018-01-02 tr中even的class是从哪里来的?
2017-12-20 美人尖如何居中
2017-09-20 关于倒三角的尖尖角问题
2017-07-24 #fff与#ffffff的区别
2017-07-15 断线下划线
2017-07-12 断线下划线
2017-05-22 表格斑马线为什么的练习必须设置border-collapse
2017-05-18 关于tr和td
2017-04-23 属性值放在一起,为什么不能正常显示“美人尖”




提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-CSS-边框 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 881555796
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图