資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 CSS 新增圓角邊框？
使用 CSS，我們可以構建視覺上吸引人的 HTML 文件。某些元素或影像可能具有圓角邊框，在構建網頁時我們可能需要考慮這一點。為此，我們可以使用 CSS 的 `border-radius` 屬性。由於圓角邊框代表著安全性、可靠性——所有這些都提升了使用者體驗——我們可能會經常將其稱為“友好矩形”。
讓我們深入瞭解本文，學習如何使用 CSS 新增圓角邊框。在此之前，我們將快速瞭解一下 CSS 的 `border-radius` 屬性。
CSS `border-radius` 屬性
可以使用 CSS 的 `border-radius` 屬性來使元素的外邊框邊緣呈圓角。此屬性有四個可能的值：一、二、三或四個。設定 `border-radius` 是使用 `border-radius` 屬性完成的。當 `border-collapse` 屬性為摺疊狀態時，表格元件不應用此屬性。
語法
以下是 CSS `border-radius` 屬性的語法
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
示例
讓我們來看下面的示例，我們將使用 CSS 的 `border-radius` 屬性在網頁上建立圓角邊框。
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
border-radius: 100px 100px;
background: #D5F5E3;
color: #DE3163;
padding: 20px;
text-align: center;
width: 280px;
height: 100px;
}
</style>
</head>
<body>
<center>
<h2> Creating rounded borders using CSS </h2>
<div class="tutorial">
<h4> WELCOME Everyone.! </h4>
</div>
</center>
</body>
</html>
執行以上程式碼後，將會彈出一個輸出視窗，其中包含在網頁上顯示的圓角邊框元素。
示例
考慮另一種情況，我們將使用 `border-bottom-left-radius` 建立左圓角邊框。
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
border: 5px solid #1C2833;
width: 330px;
height: 300px;
background-color: #EBF5FB;
color: #7D3C98;
font-family: verdana;
border-bottom-left-radius: 75px;
margin: auto;
}
.tp {
font-size: 19px;
text-align: center;
}
</style>
</head>
<body>
<div class="tutorial">
<p class="tp">Mahendra Singh Dhoni is an Indian professional cricketer. He was captain of the Indian national team in limited-overs formats from 2007 to 2017 and in Test cricket from 2008 to 2014. Dhoni is widely considered one of the greatest cricket captains, wicket-keeper-batsman and finishers in the history of cricket. </p>
</div>
</body>
</html>
執行以上程式碼後，將生成一個輸出，其中包含在網頁上顯示的左下角應用了圓角邊框的元素。
示例
在下面的示例中，我們將使用 `border-top-right-radius` 屬性在右上角建立圓角邊框。
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
border: 5px solid #34495E;
width: 320px;
height: 280px;
background-color: #D5F5E3;
color: #DE3163;
border-top-right-radius: 75px;
margin: auto;
}
.tp {
font-size: 18px;
font-family: verdana;
text-align: center;
}
</style>
</head>
<body>
<div class="tutorial">
<p class="tp"> The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more.</p>
</div>
</body>
</html>
執行以上程式碼後，將會彈出一個輸出視窗，其中包含在網頁上顯示的元素右上角的圓角邊框。
更新於：2024年1月22日
129 次瀏覽
廣告