您的位置:首页技术文章
文章详情页

css - div外层有一圈白色

浏览:79日期:2023-06-27 14:23:52

问题描述

我写页面时新建的一个p外层有一圈白色,这是怎么回事儿呢?如何去掉这个?

css - div外层有一圈白色IE

css - div外层有一圈白色火狐

css - div外层有一圈白色谷歌

源代码如下

HTML部分:

<!DOCTYPE html><html><head> <title>滑稽</title> <meta charset='UTF-8'> <link rel='stylesheet' href='https://www.haobala.com/wenda/style/normalize.css'> <link rel='stylesheet' href='https://www.haobala.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 }`

结果图:

css - div外层有一圈白色

去掉刚加的body样式 将阴影颜色去掉 box-shadow: -5px 10px 30px 10px /*#C0C0C0*/;效果图:

css - div外层有一圈白色

终上所述:你看你那一块黑色 都出来了 以至于你白色阴影也出来了 然后就出现了你说的那种效果

具体的是你这行代码有问题 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你直接删掉就可以了

标签: CSS
相关文章: