如何為 Div 創建圓角輪廓？

可以用圓角勾畫出 Div 的輪廓嗎？

與 border-radius 屬性類似，可以為 div 元素賦予圓角輪廓。雖然您可能認為 border-radius 屬性可以解決這個問題，但還有一個替代方案可以提供更多控制：box-shadow。

例如，如果您有一個帶有圓形邊框的輸入欄位並想要調整焦點可以使用輪廓顏色、盒子陰影。它提供了平滑的外觀，同時還允許模擬圓形輪廓。以下是實現此效果的方法：

input, input:focus {
    border: none;
    border-radius: 2pt;
    box-shadow: 0 0 0 1pt grey;
    outline-color: transparent; /* for high contrast modes */
    transition: .1s;
}

/* Smooth outline with box-shadow: */
.text1:focus {
    box-shadow: 0 0 3pt 2pt cornflowerblue;
}

/* Hard "outline" with box-shadow: */
.text2:focus {
    box-shadow: 0 0 0 2pt red;
}

以上是如何為 Div 創建圓角輪廓？的詳細內容。更多資訊請關注PHP中文網其他相關文章！