資料結構
網路
RDBMS
作業系統
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>
執行以上程式碼後，輸出視窗將彈出，在網頁上顯示應用了圓角的文字。
更新於: 2024年1月8日
2K+ 次瀏覽
廣告