css3 - 如何使用CSS實現圖片內邊緣模糊效果？
問題描述
<header> <p class='cover'><img src='http://www.gepszalag.com/wenda/images/bg.jpg' alt=''> </p></header>.cover { border-radius: 50%; width: 180px; height: 180px; overflow: hidden; border: 10px ridge #F4E9E0;}
代碼大概是這樣的，p層實現了一個圓形，因此無論下面的圖片是什么大小的，都只顯示一個圓形的大小，就像很多網站上看到的圓形頭像那樣。
現在想要在圖片內添加和背景顏色一致的帶透明效果的內陰影，效果如下圖。我嘗試了box-shadow屬性、border-style的多種值，都不生效。
應該如何實現這種效果？
問題解答
回答1：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：
雖然問題比較久了，還是來答一下。剛學習前端，請多指教！
<header> <p class='cover'><--! <img src='http://www.gepszalag.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;}
相關文章：
1. node.js - express請求的具體方法2. node.js - AWS配置nginx的反向代理不生效問題3. node.js - 關于Node爬蟲爬小說的問題4. html5 - 有可以一次性把所有 css外部樣式轉為html標簽內style=" "的方法嗎?5. web - Rails3使用form_for時出現undefined method `*_path’錯誤。6. node.js - 關于mongoose方法的回調函數的參數問題，如何知道參數個數以及參數代表什么含義呢？7. node.js - react應用加了react-redux后webpack打包后頁面顯示空白，也沒有報錯8. node.js - 引入node-fetch后,使用webpack的時候報錯!9. 在啟動后的90秒內，Heroku- Web進程未能綁定到$ PORT。TooTallNate Websockets10. node.js - 如何使用mongoose連接數據庫中已經存在的一個集合。
網公網安備