背景上的圆角？

我想知道，如果可能圆刚上网页的背景角落，因此，例如 -背景上的圆角？

body{background-color:#7A991A;

，所以我想圆页面的每个角落？感谢youu

来源

2012-04-15 ppaul

你必须给html元素的背景颜色：

html, body { 
    height: 100%; 
} 
html { background: white } 
body { 
    background-color:#7A991A; 
    border-radius: 20px; 
}

这里的小提琴：http://jsfiddle.net/wYKa3/

来源

2012-04-15 23:21:41

非常感谢 – ppaul 2012-04-15 23:44:59

-1

我不认为这是可能的。由于“body”是整个文档，因此如果您在页面的四个角上，应该在下面显示什么内容？

也许你可以将页面内容包装在一个<div>元素中，该元素将具有全宽和全高，然后在其上设置圆角而不是主体。然后，将身体背景设置为与全尺寸div不同的颜色，然后设置。像这样的东西应该工作：

HTML：

<body> 
    <div id="content"> 
    <!-- Your content here --> 
    </div> 
</body>

CSS：

body { background-color: #000000; } 
#content { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color: #ffffff; 
    border-radius: 10px; 
}

来源

2012-04-15 23:28:04

您可以使用此：

body{ 
-moz-border-radius:4px; 
-webkit-border-radius:4px; 
border-radius: 4px; 
-moz-box-shadow:0 2px 2px rgba(0,0,0,0.3); 
-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.3); 
box-shadow: 0 2px 2px rgba(0,0,0,0.3); 
background:#7A991A; 
}

它与圆润shaddaw颜色的角落背景。

来源

2012-04-16 00:59:25

+1，因为你确实可以做到这一点。不过需要注意的是，一些较旧的浏览器可能不喜欢你试图绕过''标签的角落。 – Spudley 2012-04-16 20:42:26

您可能还需要使用-webkit-border-radius和-moz-border-radius，像这样：

body { 
    background-color:#7A991A; 
    border-radius: 20px; 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
}

增加与不同的浏览器的兼容性。

来源

2012-04-16 01:03:02 jleft

你可以看到这个CSS与浏览器兼容级别：

html, body { 
    height: 100%; 
    background: white 
} 

body { 
-moz-border-radius:20px; 
-webkit-border-radius:20px; 
border-radius: 20px; 
background:red; 
}

演示： - http://jsfiddle.net/trzpK/

来源

2012-04-16 06:39:20

背景上的圆角？

回答

相关问题