我写页面时新建的一个p外层有一圈白色,这是怎么回事儿呢?如何去掉这个?
IE
火狐
谷歌
源代码如下
HTML部分:
<!DOCTYPE html>
<html>
<head>
<title>滑稽</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style/normalize.css">
<link rel="stylesheet" href="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都出现了这种情况
ringa_lee2017-04-17 11:57:44
加了样式`body{
background: #333
}`
结果图:
去掉刚加的body样式 将阴影颜色去掉 box-shadow: -5px 10px 30px 10px /*#C0C0C0*/;
效果图:
终上所述:你看你那一块黑色 都出来了 以至于你白色阴影也出来了 然后就出现了你说的那种效果
具体的是你这行代码有问题 box-shadow: -5px 10px 30px 10px /*#C0C0C0;*/有问题
你自己再试试协调一下
PHPz2017-04-17 11:57:44
你是指最外面的一圈阴影吗?去掉css里box-shadow那一行就行了
box-shadow:inside -5px 10px 30px 10px #C0C0C0;
不是inset是inside
ringa_lee2017-04-17 11:57:44
如果你指的是p本身和他的阴影之间的那个几乎看不见的白圈的话,可能是因为你的p本身的背景色和阴影色的色差太大,你可以试试box-shadow的inset设置一下试试