html开发中,如何做一条分割线,下面编程教程网小编给大家简单介绍一下!
基本分割线线条hr:
<hr align=center width=500 color=#f00 size=1>
扩展开发:
1、两头渐变透明:
<hr style="filter:alpha(opacity=100,finishopacity=0,style=2)" width="80%"color=#f00 size=10>
2、纺锤形:
<hr style="filter:alpha(opacity=100,finishopacity=0,style=1)" width="80%"color=#f00 size=3>
3、右边渐变透明:
<hr style="filter:alpha(opacity=0,finishopacity=100,style=1)" width="80%"color=#f00 size=3>
4、左边渐变透明:
<hr style="border:1 dashed #f00" width="80%"color=#f00 size=1>
5、虚线:
<hr style="border:3 double #f00" width="80%"color=#f00 size=3>
6、双线:
<hr style="filter:progid:dximagetransform.microsoft.shadow(color:#f00,direction:145,strength:15)"width="80%" color=#f00 size=1>
7、立体效果:
<hr style="filter:progid:dximagetransform.microsoft.glow(color=#f00,strength=10)"width="80%" color=#f00 size=1>
8、钢针效果:
<table border="1px" cellpadding="0" cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top-style:none">
9、垂直分割线
<table border="1px" cellpadding="0" cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top-style:none">
以上是编程学习网小编为您介绍的“html如何做分割线”的全面内容,想了解更多关于 前端知识 内容,请继续关注编程基础学习网。
沃梦达教程
本文标题为:html如何做分割线


基础教程推荐
猜你喜欢
- wepy微信小程序框架加入版本更新提示 2022-10-29
- layui Table 设置title 字体加粗 2022-10-18
- TypeScript 泛型的使用 2023-08-08
- 用javascript父窗口控制只弹出一个子窗口 2024-04-24
- vuejs如何利用watch实现监听 2025-01-18
- 基于Ajax技术实现文件上传带进度条 2023-01-20
- 关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别 2024-01-03
- vscode封装HTML代码片段 2023-10-29
- Vue.js中NaiveUI组件文字渐变的实现 2024-04-26
- layui table 表格模板按钮实例 2022-12-13