問(wèn)題描述

<header> <p class='cover'><img src='http://www.b3g6.com/wenda/images/bg.jpg' alt=''> </p></header>.cover { border-radius: 50%; width: 180px; height: 180px; overflow: hidden; border: 10px ridge #F4E9E0;}

代碼大概是這樣的，p層實(shí)現(xiàn)了一個(gè)圓形，因此無(wú)論下面的圖片是什么大小的，都只顯示一個(gè)圓形的大小，就像很多網(wǎng)站上看到的圓形頭像那樣。

現(xiàn)在想要在圖片內(nèi)添加和背景顏色一致的帶透明效果的內(nèi)陰影，效果如下圖。我嘗試了box-shadow屬性、border-style的多種值，都不生效。

應(yīng)該如何實(shí)現(xiàn)這種效果？

問(wèn)題解答

css.cover { border-radius: 50%; width: 180px; height: 180px; overflow: hidden; position:relative;}.cover:after{ position:absolute; content:’’; width:100%; height:100%; top:0; left:0; border-radius:50%; box-shadow:0 0 30px 10px rgba(255,255,255,.7) inset;}回答2：

雖然問(wèn)題比較久了，還是來(lái)答一下。剛學(xué)習(xí)前端，請(qǐng)多指教！

<header> <p class='cover'><--! <img src='http://www.b3g6.com/wenda/images/bg.jpg' alt=''> --> </p></header>

.cover { border-radius: 50%; width: 180px; height: 180px; overflow: hidden; background: url(’images/bg.jpg’); box-shadow:0 0 30px 10px rgba(255,255,255,.7) inset;}