我写页面时新建的一个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都出现了这种情况
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Added style `body{
Result picture:
Remove the body style you just added and remove the shadow color
box-shadow: -5px 10px 30px 10px /*#C0C0C0*/;Rendering:
Finally: Look at the black part of you coming out, so that the white shadow also comes out, and then the effect you mentioned appears
Specifically, there is a problem with this line of code
box-shadow: -5px 10px 30px 10px /*#C0C0C0;*/有问题You can try to coordinate it yourself
Try adding style to the body so that margin: 0; padding: 0;
In the past, white edges appeared only when pictures were inserted. If you don’t believe me, try it
Regarding css shadows, you can read my article. ;)
http://www.jianshu.com/p/4280...
Do you mean the outermost circle of shadow? Just remove the box-shadow line in css
box-shadow:inside -5px 10px 30px 10px #C0C0C0;
It’s not inset but inside
If you are referring to the almost invisible white circle between the p itself and its shadow, it may be because the color difference between the background color and the shadow color of your p itself is too large. You can try box- Try setting the inset of shadow
box-shadow: -5px 10px 30px 10px #C0C0C0; Of course you set this, just remove it or change it to inner shadow
*{
}
This can overlap html and body.
It’s because you added the shadow attribute to p
You can just delete box-shadow