圓角效果

    body {
background-color: orange;
}

#wrapper {
background-color: blue;
width: 1000px;
margin: 0 auto;
padding: 20px 0;
}

#header {
background-color: red;
width: 900px;
height: 100px;
margin: 0 auto;
}

#container {
background-color: pink;
width: 900px;
height: 100px;
margin: 0 auto;
}

#footer {
background-color: green;
width: 900px;
height: 100px;
margin: 0 auto;
}
曾經
起初接觸到 css 這三個字，是因為學了基本的 html 後，嘗試修改xx小站的版型，一看到 css 和自已想要的效果對應不起來，就…縮了回去吃手手，印象中要做出圓角的效果，需要搭配圖片。
相隔不遠，同樣的效果只要透過 css 即可完成。
html：
<div id=”a”></div>
css：

#a {
width: 300px;
height: 100px;
border: 1px solid #000;
border-radius: 10px;
}
效果：