資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝學
法學使用 CSS 建立圓形圖片
使用 CSS，我們可以構建一個視覺上吸引人的 HTML 文件。有時，在建立網頁時，我們希望某個影像或元素具有圓角。在這種情況中，可以使用 CSS border-radius 屬性。它可以用來吸引訪問者的注意力，讓網站在他們心中脫穎而出。
CSS border-radius 屬性
使用 CSS border-radius 屬性，可以在元素外邊緣的四個角上設定圓角。此屬性可以有一個、二個、三個或四個值。可以使用 border-radius 屬性設定圓角半徑。當 border-collapse 處於摺疊狀態時，此屬性不適用於表格元素。
語法
以下是 CSS border-radius 屬性的語法
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
範例
我們來看一下下面的範例，其中我們將使用 CSS 建立一個圓形的影像
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
text-align: center;
color: #DE3163;
background-color: #F2F4F4;
}
img {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>ROUNDED IMAGE</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4M63a1Jp3mtSgSRqhIyxj4E7_8X7fueNLNQ&usqp=CAU" alt="tree" style="width:200px">
</body>
</html>
當我們執行上述程式碼時，它將生成一個輸出，其中包含在網頁上顯示的圓形影像。
範例
考慮另一種情況下，我們要為一個元素應用圓角
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
color: #DE3163;
background-color: #F4ECF7;
padding: 150px;
}
#tp {
display: flex;
justify-content: center;
align-items: center;
border-radius: 30px;
border: 3px solid #1E8449;
width: 150px;
height: 100px;
}
</style>
</head>
<body>
<div id="tp">WELCOME</div>
</body>
</html>
執行上述程式碼，會彈出一個輸出視窗，其中會顯示在網頁上應用圓角的文字。
更新時間：08-Jan-2024
2K+ 瀏覽量
廣告