検索

ホームページ  >  に質問  >  本文

css - div外层有一圈白色

我写页面时新建的一个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都出现了这种情况

怪我咯怪我咯2785日前687

全員に返信(8)返信します

  • ringa_lee

    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;*/有问题
    你自己再试试协调一下

    返事
    0
  • 天蓬老师

    天蓬老师2017-04-17 11:57:44

    试试看body上加上style,使得margin:0; padding:0;
    以前是插入图片才会出现白边的情况,不信你试试

    返事
    0
  • PHPz

    PHPz2017-04-17 11:57:44

    关于css阴影,可以看一下我的这篇文章。 ;)
    http://www.jianshu.com/p/4280...

    返事
    0
  • PHPz

    PHPz2017-04-17 11:57:44

    你是指最外面的一圈阴影吗?去掉css里box-shadow那一行就行了

    box-shadow:inside -5px 10px 30px 10px #C0C0C0;
    不是inset是inside

    返事
    0
  • ringa_lee

    ringa_lee2017-04-17 11:57:44

    如果你指的是p本身和他的阴影之间的那个几乎看不见的白圈的话,可能是因为你的p本身的背景色和阴影色的色差太大,你可以试试box-shadow的inset设置一下试试

    返事
    0
  • 天蓬老师

    天蓬老师2017-04-17 11:57:44

    box-shadow: -5px 10px 30px 10px #C0C0C0; 你设置了这个当然啊,直接去掉或者变成内阴影

    返事
    0
  • PHP中文网

    PHP中文网2017-04-17 11:57:44

    *{

    padding:0;
    margin:0;

    }
    这个能将html和body重合。

    返事
    0
  • PHP中文网

    PHP中文网2017-04-17 11:57:44

    是因为你给p加了阴影属性
    box-shadow你直接删掉就可以了

    返事
    0
  • キャンセル返事