css - div外層有一圈白色
問題描述
我寫頁面時新建的一個p外層有一圈白色,這是怎么回事兒呢?如何去掉這個?
IE
火狐
谷歌
源代碼如下
HTML部分:
<!DOCTYPE html><html><head> <title>滑稽</title> <meta charset='UTF-8'> <link rel='stylesheet' href='http://www.intensediesel.com/wenda/style/normalize.css'> <link rel='stylesheet' href='http://www.intensediesel.com/wenda/style/style.css'></head><body> <p class='round-face'><p class='eyebrow-left'></p><p class='eyebrow-right'></p><p class='eye-left'> <p class='eyeball-left'></p></p><p class='eye-right'> <p class='eyeball-right'></p></p><p class='flush-left'></p><p class='flush-right'></p><p class='mouth'></p> </p></body></html>
CSS部分
.round-face { display: block; width: 200px; height: 200px; position: relative; border-radius: 100px; background: radial-gradient(#f7e49b 30%, #f6b74e 99%, #C0C0C0 100%); box-shadow: -5px 10px 30px 10px #C0C0C0; margin: 20px;}
目前無論是谷歌瀏覽器還是IE都出現了這種情況
問題解答
回答1:加了樣式`body{
background: #333 }`
結果圖:
去掉剛加的body樣式 將陰影顏色去掉 box-shadow: -5px 10px 30px 10px /*#C0C0C0*/;效果圖:
終上所述:你看你那一塊黑色 都出來了 以至于你白色陰影也出來了 然后就出現了你說的那種效果
具體的是你這行代碼有問題 box-shadow: -5px 10px 30px 10px /*#C0C0C0;*/有問題你自己再試試協調一下
回答2:試試看body上加上style,使得margin:0; padding:0;以前是插入圖片才會出現白邊的情況,不信你試試
回答3:關于css陰影,可以看一下我的這篇文章。 ;)http://www.jianshu.com/p/4280...
回答4:你是指最外面的一圈陰影嗎?去掉css里box-shadow那一行就行了
box-shadow:inside -5px 10px 30px 10px #C0C0C0;不是inset是inside
回答5:如果你指的是p本身和他的陰影之間的那個幾乎看不見的白圈的話,可能是因為你的p本身的背景色和陰影色的色差太大,你可以試試box-shadow的inset設置一下試試
回答6:box-shadow: -5px 10px 30px 10px #C0C0C0; 你設置了這個當然啊,直接去掉或者變成內陰影
回答7:*{
padding:0;margin:0;
}這個能將html和body重合。
回答8:是因為你給p加了陰影屬性box-shadow你直接刪掉就可以了
相關文章:
1. html5 - 有可以一次性把所有 css外部樣式轉為html標簽內style=" "的方法嗎?2. sql語句 - mysql中關聯表查詢問題3. javascript - 原生canvas中如何獲取到觸摸事件的canvas內坐標?4. javascript - [js]為什么畫布里不出現圖片呢?在線等5. javascript - vscode alt+shift+f 格式化js代碼,通不過eslint的代碼風格檢查怎么辦。。。6. javascript - 如何將一個div始終固定在某個位置;無論屏幕和分辨率怎么變化;div位置始終不變7. html - vue項目中用到了elementUI問題8. javascript - iframe 為什么加載網頁的時候滾動條這樣顯示?9. javascript - 求解答:實例對象調用constructor,此時constructor內的this的指向?10. javascript - 有什么比較好的網頁版shell前端組件?
