CSS中設(shè)置邊框一半陰影非常簡(jiǎn)單,可以使用box-shadow屬性。該屬性用于在元素周?chē)鷦?chuàng)建一個(gè)或多個(gè)陰影效果。
.box { border: 2px solid #000; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
上面的代碼將為類(lèi)名為“box”的元素設(shè)置一個(gè)2像素粗的黑色邊框和陰影效果。box-shadow的屬性值包括水平偏移量、垂直偏移量、模糊半徑和顏色。在這個(gè)例子中,水平和垂直偏移量均為0,模糊半徑為10像素,顏色為半透明黑色。
如果想要設(shè)置只有兩個(gè)相鄰邊框有陰影效果,可以使用: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; }
上面的代碼將為類(lèi)名為“box”的元素設(shè)置一個(gè)2像素粗的黑色邊框,左側(cè)和右側(cè)各有一個(gè)陰影效果。使用:before和:after選擇器創(chuàng)建偽元素,使其與父元素重疊并適當(dāng)位置,然后使用box-shadow屬性添加陰影效果。
總之,設(shè)置邊框一半陰影可以在頁(yè)面中為元素添加視覺(jué)深度和層次感。