CSS中設置邊框一半陰影非常簡單,可以使用box-shadow屬性。該屬性用于在元素周圍創(chuàng)建一個或多個陰影效果。
.box { border: 2px solid #000; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
上面的代碼將為類名為“box”的元素設置一個2像素粗的黑色邊框和陰影效果。box-shadow的屬性值包括水平偏移量、垂直偏移量、模糊半徑和顏色。在這個例子中,水平和垂直偏移量均為0,模糊半徑為10像素,顏色為半透明黑色。
如果想要設置只有兩個相鄰邊框有陰影效果,可以使用:after和:before選擇器。
.box { border: 2px solid #000; position: relative; } .box:before, .box:after { position: absolute; content: ""; width: 2px; height: 100%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } .box:before { left: 0; top: 0; } .box:after { right: 0; top: 0; }
上面的代碼將為類名為“box”的元素設置一個2像素粗的黑色邊框,左側和右側各有一個陰影效果。使用:before和:after選擇器創(chuàng)建偽元素,使其與父元素重疊并適當位置,然后使用box-shadow屬性添加陰影效果。
總之,設置邊框一半陰影可以在頁面中為元素添加視覺深度和層次感。