css3下拉菜单边框 |css设置div 百分比高度

/* 下拉菜单悬浮效果(border-radius) */
.dropdown {
position: relative;
}
.dropdown-content {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: #fff;
border-radius: 0 0 5px 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
visibility: hidden;
opacity: 0;
transition: all 0.2s ease-in-out;
z-index: -1;
}
.dropdown:hover .dropdown-content {
visibility: visible;
opacity: 1;
z-index: 1;
}
/* 下拉菜单边框效果(border) */
.dropdown {
position: relative;
}
.dropdown-content {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: #fff;
border: 1px solid #ccc;
border-top: none;
visibility: hidden;
opacity: 0;
transition: all 0.2s ease-in-out;
z-index: -1;
}
.dropdown:hover .dropdown-content {
visibility: visible;
opacity: 1;
z-index: 1;
}
/* 下拉菜单阴影效果(box-shadow) */
.dropdown {
position: relative;
}
.dropdown-content {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
visibility: hidden;
opacity: 0;
transition: all 0.2s ease-in-out;
z-index: -1;
}
.dropdown:hover .dropdown-content {
visibility: visible;
opacity: 1;
z-index: 1;
}

以上代码示例中，第一个示例使用了border-radius属性，实现了悬浮效果；第二个示例使用了border属性，实现了边框效果；第三个示例使用了box-shadow属性，实现了阴影效果。

这些CSS3下拉菜单边框效果，可以通过对其进行个性化的调整，来适应不同的网页设计需要。在进行CSS3下拉菜单边框设计时，需要注意的是要保持菜单元素的简洁性和易用性，避免影响用户的浏览体验。