CSS border-radius屬性用法及代碼示例

此 CSS 屬性設置圓角邊框並在元素、標簽或 div 周圍提供圓角。它定義了元素角的半徑。

它是邊界 top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius 的簡寫。它為元素邊框的角提供圓形形狀。我們可以使用 border-radius 在單個聲明中為框的所有四個角指定邊框。此屬性的值可以以百分比或長度單位定義。

此 CSS 屬性包括如下列表所示的屬性：

屬性	描述
border-top-left-半徑	用於設置左上角的 border-radius
border-top-right-半徑	用於設置右上角的 border-radius
border-bottom-right-半徑	用於設置右下角的 border-radius
border-bottom-left-半徑	用於設置左下角的 border-radius

如果省略左下角的值，則它將與右上角相同。如果去掉右下角的值，則和左上角相同。同理，如果去掉右上角，則與左上角相同。

讓我們看看當我們為該屬性提供一個值、兩個值、三個值和四個值時會發生什麽。

如果我們為此屬性提供單個值(例如 border-radius:30px;)，它會將所有角設置為相同的值。
當我們指定兩個值時(例如 border-radius:20% 10% ;)，那麽第一個值將用於左上角和右下角，第二個值將用於右上角和下角-左角。
當我們使用三個值(例如 border-radius:10% 30% 20%;)時，第一個值將用於左上角，第二個值將用於右上角，左下角和第三個值將應用於右下角。
同樣，當這個屬性有四個值 (border-radius:10% 30% 20% 40%;) 那麽第一個值將是左上角的半徑，第二個值將用於右上角，第三個值將應用於右下角，第四個值用於左下角。

用法

border-radius:1-4 length | %  / 1-4 length | % | inherit | initial;

屬性值

length:它定義了角的形狀。它使用長度值表示半徑的大小。它的默認值是 0。它不允許負值。

percentage:它以百分比表示半徑的大小。它也不允許負值。

示例

<!DOCTYPE html>
<html>

<head>
<title> CSS border-radius </title>
<style>
div {
padding:50px;
margin:20px;
border:6px ridge red;
width:300px;
float:left;
height:150px;
}
p{
font-size:25px;
}
#one {
border-radius:90px;
background:lightgreen;
}
#two {
border-radius:25% 10%;
background:orange;
}
#three {
border-radius:35px 10em 10%;
background:cyan;
}
#four {
border-radius:50px 50% 50cm 50em;
background:lightblue;
}

</style>
</head>

<body>
<div id = "one">
<h2> Welcome to the javaTpoint.com </h2>
<p> border-radius:90px; </p>
</div>
<div id = "two">
<h2> Welcome to the javaTpoint.com </h2>
<p> border-radius:25% 10%; </p>
</div>
<div id = "three">
<h2> Welcome to the javaTpoint.com </h2>
<p> border-radius:35px 10em 10%; </p>
</div>
<div id = "four">
<h2>Welcome to the javaTpoint.com</h2>
<p>border-radius:50px 50% 50cm 50em;</p>
</div>
</body>
</html>

輸出

現在，讓我們看看特定角落的 border-radius。

示例- border-top-left-半徑

它設置左上角的邊框半徑。

<!DOCTYPE html>
<html>

<head>
<title> CSS border-radius </title>
<style>
#left {
border-top-left-radius:250px;
background:lightgreen;
padding:50px;
border:6px ridge red;
width:300px;
height:200px;
font-size:25px;
}
</style>
</head>

<body>
<center>
<div id = "left">
<h2>Welcome to the javaTpoint.com</h2>
<p>border-top-left-radius:250px;</p>
</div>
</center>
</body>
</html>

輸出

示例- border-top-right-半徑

它為右上角設置 border-radius。

<!DOCTYPE html>
<html>
<head>
<style>
#left {
border-top-right-radius:50%;
background:lightgreen;
padding:50px;
border:6px ridge red;
width:300px;
height:200px;
font-size:25px;
}
</style>
</head>

<body>
<center>
<div id = "left">
<h2>Welcome to the javaTpoint.com</h2>
<p>border-top-right-radius:50%;</p>
</div>
</center>
</body>
</html>

輸出

示例- border-bottom-right-半徑

它為右下角設置 border-radius。

<!DOCTYPE html>
<html>
<head>
<style>
#left {
border-bottom-right-radius:50%;
background:lightgreen;
padding:50px;
border:6px ridge red;
width:300px;
height:200px;
font-size:25px;
}
</style>
</head>

<body>
<center>
<div id = "left">
<h2>Welcome to the javaTpoint.com</h2>
<p>border-bottom-right-radius:50%;</p>
</div>
</center>
</body>
</html>

輸出

示例- border-bottom-left-半徑

它為左下角設置 border-radius。

<!DOCTYPE html>
<html>
<head>
<style>
#left {
border-bottom-left-radius:50%;
background:lightgreen;
padding:50px;
border:6px ridge red;
width:300px;
height:200px;
font-size:25px;
}
</style>
</head>

<body>
<center>
<div id = "left">
<h2>Welcome to the javaTpoint.com</h2>
<p>border-bottom-left-radius:50%;</p>
</div>
</center>
</body>
</html>

輸出

我們可以使用斜杠 (/) 符號指定單獨的水平和垂直值。斜線 (/) 之前的值用於水平半徑，斜線 (/) 之後的值用於垂直半徑。

下麵給出了一個使用斜杠 (/) 符號的示例。

示例

<!DOCTYPE html>
<html>
<head>
<style>
div{
padding:50px;
border:6px ridge red;
width:300px;
margin:20px;
font-weight:bold;
height:175px;
float:left;
font-size:25px;
}
#one {
border-radius:10% / 50%;
background:lightgreen;
}
#two {
border-radius:120px / 100px 10px;
background:lightblue;
}
#three {
border-radius:50% 10em / 10% 20em;
background:lightpink;
}
#four {
border-radius:100px 10em 120px / 30%;
background:cyan;
}
</style>
</head>

<body>
<center>
<div id = "one">
<h2>Welcome to the javaTpoint.com</h2>
<p>border-radius:10% / 50%; </p>
</div>
<div id = "two">
<h2>Welcome to the javaTpoint.com</h2>
<p>border-radius:120px / 100px 10px; </p>
</div>
<div id = "three">
<h2>Welcome to the javaTpoint.com</h2>
<p>border-radius:50% 10em / 10% 20em; </p>
</div>
<div id = "four">
<h2>Welcome to the javaTpoint.com</h2>
<p>border-radius:100px 10em 120px / 30%; </p>
</div>
</center>
</body>
</html>

輸出

相關用法

注：本文由純淨天空篩選整理自 CSS border-radius property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。