色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

下拉三角怎么設置css

夏志豪2年前8瀏覽0評論

下拉三角是常見的UI設計元素之一,它可以用來展示下拉列表、彈出菜單等。在CSS中,可以通過偽元素來實現下拉三角的效果。以下是實現下拉三角的CSS樣式:

.dropdown {
position: relative;
display: inline-block;
}
.dropdown::after {
content: '';
display: inline-block;
border: 4px solid transparent;
border-top-color: #000;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
}
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
display: none;
}
.dropdown:hover .dropdown-menu {
display: block;
}

上述CSS代碼中,首先給下拉菜單的外層容器(.dropdown)設置了position:relative;,用來作為下拉菜單的定位基準。然后使用偽元素(::after)來添加一個三角形,設置border為4px,border-top-color為黑色,這樣就實現了三角形的效果。position為absolute,top:50%以及transform: translateY(-50%)用于讓三角形在垂直方向上居中。right:10px使得三角形與容器的右邊框距離10px,這個距離可以根據實際需求調整。

接下來,給下拉菜單(.dropdown-menu)設置position:absolute;top:100%;right:0;display:none;,將其定位在下拉菜單容器的下方,并設置為不可見。這里使用了:hover偽類,當鼠標懸停在.dropdown上時,會顯示下拉菜單,具體實現使用display:block;即可。