数据结构
网络
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+ 次浏览
广告