雖然離中秋節還很遠, 已經想烤肉了XD ,但每次抬頭仰望星空,看到月亮一點一滴的變化,
讓我心中掀起小波瀾,心中思考著要如何讓月亮長存,而不是只有黑夜。
就要利用CSS語法border-radius
border-radius: 20px ;
//全部的角
border-radius: 20px 20px 20px 20px;
//順時針的順序來指定的:左上、右上、右下、左下。
border-radius: 20px 0;
//左上及右下、右上及左下
//簡單理解,就是左上對角、右上對角
<p>
床前明月光,
疑是地上霜。
舉頭望明月,
低頭思故鄉。
</p>
<style>
p{
padding: 10px;
width: 300px;
height: 300px;
background-color: yellow;
border-radius: 20px;
//全部的角值:20px
}
</style>
可以直接用 %,可以記得一個特別的用法。
如果你用 50% 就會出現標準的圓型
<div class="moon"></div>
<style>
.moon{
width:200px;
height:200px;
border-radius:50%;
background-color: yellow;
}
</style>
<div class="moon"></div>
<style>
.moon{
width:200px;
height:100px;
border-radius:200px 200px 0 0;
background-color: yellow;
}
</style>
答案:用
- border-radius:左上、右上、右下、左下。
- border-radius:左上對角、右上對角。
- 想要畫圓形,border-radius:50%;