数据结构
网络
关系数据库管理系统 (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 次浏览
广告