我正在尝试创建一些圆角的 div(应该是按钮)。我可以使用border-radius.htc 或PIE.htc 来实现它。
我使用 margin-top 定位它们。流到下面另一个 div 的按钮部分不可见,它应该是不可见的。检查截图:
.menu_buttons{
margin-top:45px;
overflow: visible;
margin-left: 10px;
width: 85px;
height: 3em;
vertical-align: middle;
float:left;
cursor: pointer;
text-align: center;
font: 0.9em Arial, Helvetica, sans-serif;
border-radius: 10px;
behavior: url(PIE.htc);
}
。对角线:
.diagonal{
background-image: linear-gradient(left top, #CFD993 30%, #8DA900 68%);
background-image: linear-gradient(-45deg, #CFD993 30%, #8DA900 68%);
background-image: -o-linear-gradient(left top, #CFD993 30%, #8DA900 68%);
background-image: -moz-linear-gradient(-45deg left top, #CFD993 30%, #8DA900 68%);
background-image: -webkit-linear-gradient(135deg, #CFD993 30%, #8DA900 68%);
background-image: -ms-linear-gradient(left top, #CFD993 30%, #8DA900 68%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CFD993', endColorstr='#8DA900', GradientType=1);
/*background: #CFD993;*/
background-image: -webkit-gradient(
linear,
left top,
right bottom,
color-stop(0.3, #CFD993),
color-stop(0.68, #8DA900)
);
}
我的html的一部分:
<div class="diagonal" id="section1">
<img alt="SMIC Service Management In the Cloud" src="/images/smic_small.png" id="smic">
<div class="link_menu">
<button class="menu_buttons ui-corner-all smic_green" id="overview">Overview</button>
<!--Some more <div....-->
<button class="menu_buttons ui-corner-all smic_green" id="usage_benchmark">SMICloud<br>usage<br>benchmark</button>
<a class="menu_items" id="get_smic">Get SMICloud</a>
<!--Some more <a....-->
<a class="menu_items" id="contact">Contact</a>
</div>
</div>
将以下内容添加到 .diagonal 会根据以下屏幕截图更改外观:
position: relative;
z-index: -1;
尝试将 z-index -10 添加到 #section1 下方的 div 时,没有任何反应。
我完全被困住了。我该如何做到这一点,创建一个圆角的 div 溢出到另一个 div?