Question

我试图在网页上一起使用box-shadow和border-radius，并且它显示的是填充半径空间的白色图像。想象一下，当你在带有投影，jpg或png-8文件的photoshop中保护“透明”图像时。

这是一张图片，向您展示我的意思。

（我无法发布图片，但这里是链接） http://i.imgur.com/jDpIH.png

我使用它作为我的CSS

.whole
{
width: 1000px;
margin: 0 auto;
-webkit-box-shadow: 0px 3px 5px 2px #000000;
-mox-box-shadow: 0px 3px 5px 2px #000000;
box-shadow: 0px 3px 5px 2px #000000; 
}


.top
{
height: 120px;
background-color: #1F1209;
margin-top: 50px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.footer
{
height: 250px;
background-color: #834C24;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}

所以有人知道我是否有办法解决这个问题？顺便说一下，这在Firefox和IE中正在发生。我不能在其他浏览器中查看它。

我真的不想使用Photoshop图像......因为CSS3绝对应该使用。

对此有何想法？我非常感谢任何帮助！ :)

感谢您的时间！

Answer 1

给你一点提示

使用此css3作为快捷方式，而不是添加-left -right- top

border-radius:0px 0px 0px 0px;

<!-- [top left] [top right] [bottom right] [bottom left] -->

如果你这样做会更容易。

至于盒子阴影......我不知道为什么会这样，但是我使用了这段代码并且效果非常好。

box-shadow:0px 0px 10px black;

<!-- in case you don't know ...  [x coordinate] [y coordinate] [size of shadow] [color] -->

好吧，我不知道这些代码是否适用于IE，因为我不使用IE浏览器而且我的计算机会突然挂起但是......反正。

我重写了一个类css代码，希望它能正常工作。

.footer
{
    height: 250px;
    background-color: #834C24;
    border-radius:10px 10px 10px 10px;
    box-shadow:0px 0px 50px black;
}

我认为即使你没有把-webkit-和-moz-，Mozilla和Chrome也会读到。我希望它也适用于IE。

无论如何......就是这样。希望这样做。

Answer 2

您可能有一个与容器相关联的背景颜色。

Answer 3

IE9 +，Firefox 4 +，Chrome，Safari 5+和Opera支持border-radius属性，因为它是CSS3属性。语法是：

border-radius: 1-4 length|% / 1-4 length|%;

示例1

border-radius:2em;

相当于：

border-top-left-radius:2em;
 border-top-right-radius:2em;
 border-bottom-right-radius:2em;
 border-bottom-left-radius:2em;

示例2

border-radius: 2em 1em 4em / 0.5em 3em;

相当于：

border-top-left-radius: 2em 0.5em;
 border-top-right-radius: 1em 3em;
 border-bottom-right-radius: 4em 0.5em;
 border-bottom-left-radius: 1em 3em;

Border-Radius＆amp; Box-Shadow无法正确渲染

3 个答案: