背景上的圓角？

我想知道，如果可能圓剛上網頁的背景角落，因此，例如 -背景上的圓角？

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

背景上的圓角？

回答

相關問題