html有红色虚线边框效果,html 边框虚线

html 边框虚线

2018-12-08

html 边框虚线实现通过CSS实现不同对象虚线边框样式

在HTML可以对大部分标签加边框或虚线边框，接下来DIVCSS5会对几个不同标签加虚线边框效果样式，大家可以根据演示扩展灵活掌握与应用到自己DIV+CSS布局中。

一、用到CSS样式和HTML标签元素   -  TOP

为了对html不同标签加边框虚线，我们选择几个常用标签对齐设置边框虚线效果。

1、html常用标签

div标签

span

ul li

table tr td

2、实例用到CSS属性单词

border

width

height

3、实现虚线的CSS重点介绍

border为边框属性，如果要实现对象边框效果，要设置边框宽度、边框颜色、边框样式(实线还是虚线)

border:1px dashed #F00 这个就是设置边框样式宽度为1px，虚线，虚线为红色。

4、实例描述

我们对以上几个标签设置相同宽度、相同高度、边框效果。

5、完整HTML代码：

html>

html边框虚线演示 www.divcss5.com

.bor{border:1px dashed #F00;width:300px;height:60px;margin-top:10px}

span{display:block}/*css注释说明：让span形成块*/

div盒子

span盒子

• ul li列表
• ul li列表

表格	表格2
数据	数据2

以上实例对html中不同标签设置相同的样式，包括相同边框虚线。

6、浏览器效果截图

html不同标签设置边框虚线效果截图

7、在线演示：查看案例

8、DIVCSS5实例打包下载

立即下载 (1.048KB)

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h630.shtml

免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。

http://www.pinlue.com/style/images/nopic.gif