html - 我怎样才能在两个内容区域之间添加分隔符 gif 是这样的？

Question

我的意思是主体上有两个内容，内容左侧和内容右侧，我想将内容右侧作为菜单面板并在它们之间放置一个分隔符 gif（羽化垂直线）。请告诉我我该怎么做？什么是css代码？谢谢。

Answer 1

看到你可以通过简单的代码得到你想要的结果：-

HTML

<div class="wrapper">
<div class="left">left-panel</div>     
<div class="right">right-panel</div>    
</div>  

CSS

.wrapper {
border:1px solid red;
overflow:hidden;
width:220px
}

.left {
float:left;
width:100px;
height:280px;  
background:grey; 
position:relative;
}

.left:after {
position:absolute;
content:" ";
width:1px; 
height:280px;
background-color: #FAFAFA;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#FAFAFA));
background: -moz-linear-gradient(top, #000000 0%, #FAFAFA 100%);  
right:-10px;
top:0;  
}
.right {
float:right;
width:100px;
height:280px;  
background:lightgrey;  
}

演示

Answer 2

#vertical {
    border-left:thick solid #ffff00;
}

这应该工作