【HTML5】Web前端——网页实用技巧1：将一个方形图片，变成圆形（利用CSS属性）

最新推荐文章于 2023-07-30 16:23:46 发布

逍遥小丸子

最新推荐文章于 2023-07-30 16:23:46 发布

阅读量9.3k

点赞数 4

分类专栏： HTML+CSS网页设计

本文链接：https://blog.csdn.net/dnruanjian/article/details/110946953

版权

HTML+CSS网页设计专栏收录该内容

43 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何使用CSS属性将方形或长方形图片转化为圆形图片，通过创建一个方形div并利用border-radius属性设置为50%，配合overflow:hidden，可以轻松实现无需额外处理图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要效果：将原本是长方形、正方形的图片，变成一个圆形图片

这样的好处：不需要对图片进行特别的处理，直接使用

实现思路：

①制作一个方形div盒子，将图片放在div盒子里

②将盒子设置成圆形（利用 border-radius 属性）

③设置盒子的 overflow 属性值为 hidden

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>制作圆形图片-王迪</title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				border-radius: 50%;/*制作圆形的原理：将正方形的盒子，设置 border-radius属性值为50%*/
				overflow:hidden;/*设置超出部分，隐藏*/

了解本专栏