CSS - 圓角：初學者指南

你好，有志於網頁設計的各位！今天，我們將要進入CSS圓角的奇妙世界。作為你們親切友善的電腦老師，我將指導你們一步一步地走過這個旅程。所以，拿起你們最喜歡的飲料，放鬆一下，讓我們把那些尖角變得光滑！

圓角是什麼？

在我們進入代碼之前，讓我們先來討論一下圓角到底是什麼。想像你有一張正方形的紙。現在，如果你用剪子剪掉角落，你會得到圓角。這正是我們將要在網頁元素上做的事情，但是數位化地！

魔法屬性：border-radius

在CSS中，我們使用一個名為border-radius的屬性來創建圓角。這就像我們的數位剪子！讓我們看看我們如何使用它。

基本語法

.rounded-box {
border-radius: 10px;
}

這行簡單的代碼將使我們元素的四面角落都變成10像素的圓角。很棒吧？

可能的值

現在，讓我們探討一下我們可以如何使用border-radius。這就像我們工具箱中有不同類型的剪子！

值類型	示例	描述
長度	20px	指定半徑的像素值
百分比	10%	相對於元素大小的半徑
初始值	initial	設置為默認值
繼承	inherit	從父元素繼承

長度值

.slightly-rounded {
border-radius: 5px;
}

.very-rounded {
border-radius: 20px;
}

在這些示例中，我們使用像素值。數字越大，我們的角落就會變得越圓！

百分比值

.responsive-rounded {
border-radius: 10%;
}

使用百分比對於響應式設計來說非常好。圓角會根據元素的大小來調整！

適用範圍

不是所有的東西都能有圓角（這會很有趣吧？）。這是我們可以讓哪些東西變圓的：

• 块級元素
• 內聯塊元素
• 表格元素
• 一些替換元素（如圖像）

DOM語法

對於那些想用JavaScript操作圓角的人，這是如何做到的：

object.style.borderRadius = "10px";

這使用JavaScript將border-radius設置為10像素。這就像使用一對可編程的剪子！

CSS Border Radius - 長度值

讓我們來得更加高級一點。我們實際上可以為每個角落指定不同的半徑！

.fancy-box {
border-radius: 10px 20px 30px 40px;
}

這將設置左上角為10px，右上角為20px，右下角為30px，左下角為40px。就像有四對不同的剪子！

CSS 圓角圖像

你知道我們也可以圓化圖像的角落嗎？這就像給你的照片來個時尚的修剪！

.rounded-image {
border-radius: 50%;
}

這會將你的方形圖像變成一個完美的圓形。對於頭像來說非常棒！

CSS border-radius - 相關屬性

邊框半徑在CSS世界中有一些朋友。讓我們來認識它們：

屬性	描述
border-top-left-radius	圓化左上角
border-top-right-radius	圓化右上角
border-bottom-right-radius	圓化右下角
border-bottom-left-radius	圓化左下角

這些屬性允許你針對特定的角落。這就像有精準的剪子！

.partially-rounded {
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
}

這將只圓化左上角和右下角。完美用於創造獨特的形狀！

實用範例：創建對話泡

讓我們把新學到的知識用起來，創建一個簡單的對話泡：

.speech-bubble {
background-color: #f0f0f0;
border-radius: 20px;
padding: 20px;
position: relative;
}

.speech-bubble::after {
content: '';
position: absolute;
bottom: -20px;
left: 20px;
border-width: 20px 0 0 20px;
border-style: solid;
border-color: #f0f0f0 transparent;
}

在這裡，我們使用border-radius來圓化主要的泡，然後使用::after偽元素創造一個小三角形，讓它看起來像一個對話泡。這就像數位折紙！

結論

好了，各位！我們已經通過圓角的基礎知識來圓化我們的路。記住，網頁設計就是關於實驗。不要害怕玩轉這些屬性，看看你能創造出什麼酷炫的設計！

下次當你在瀏覽網頁時，留意你看到的圓角。現在你知道它們背後的秘密了！持續練習，很快你將成為數位世界中平滑邊緣的大師。

快樂編程，願你所有的角落都能如你所願般光滑！

Credits: Image by storyset