数据结构
网络
关系数据库管理系统
操作系统
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>
运行上述代码，会弹出一个输出窗口，其中会显示在网页上应用圆角的文本。
更新时间：08-Jan-2024
2K+ 浏览量
广告