html垂直线6,HTML的垂直线
HTML的⽔平线标签是hr但是没有垂直线的标签，但是html的左右分隔时候垂直线有时候也是需要到的.⾃然对于div来说设置右边框或者左边框即可，但是想要⼀条独⽴的线却是⽆能为⼒.
上⽹查了很多的⽅法基本都是讲⽔平线的width设置1px⾼度设置到适应⾼度这样做却是没问题，但是不是我想要的，然后偶然想起⾃⼰做的项⽬中有⼀个页⾯是⽤div来做的左右垂直线，设置div的宽度为1px;⾼度为适应⾼度，再设置div的背景图⽚为1个像素的点即可.代码如下
这样就能产⽣⼀条垂直的'线'了.美中不⾜的是这条线太单薄了.适当为其添加阴影效果
-moz-box-shadow: 1px 1px 1px #000;
-webkit-box-shadow: 1px 1px 1px #000;
box-shadow: 1px 1px 1px #000;
/* For IE 8 */
jquery在项目里是干啥的-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#000000')";
/
* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#000000');
这样垂直线基本就完成了.
实际上，垂直线的⾼度有时候并不是确定的，需要适应div的⾼度，没到css的解决办法另其height:100%也会突出⽗div只能暂且使⽤js帮助解决
js代码如下(导⼊了jquery)
$(document).ready(function(){
var verticalLine = $(".vertical-line");
var height = $(".row-fluid").height();
verticalLine.css("height", height);
});
不是完美的解决⽅案，先这样解决另寻更佳⽅案.
效果图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。