【HTML5】网页实用技巧3：将方形图片设置成圆形后，添加圆形虚线边框

最新推荐文章于 2022-07-22 22:43:29 发布

逍遥小丸子

最新推荐文章于 2022-07-22 22:43:29 发布

阅读量4.1k

点赞数 1

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

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

版权

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

43 篇文章 149 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何使用HTML5和CSS将方形图片转换为圆形，并添加圆形虚线边框。通过创建一个正方形div，设置边框样式，利用border-radius属性使元素呈现圆形，然后应用到图片上。此外，还探讨了为图片添加鼠标悬停时的旋转动画效果，涉及到@keyframes和hover伪类选择器的应用。

摘要由CSDN通过智能技术生成

需要实现的效果：将原本是方形的图片，变成圆形，且添加一个圆形边框

实现思路：

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

②将div盒子，设置边框样式

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

④设置图片的 border-radius 属性

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>圆形图片虚线框-王迪</title>
		<style type="text/css">
			.yuantu {
				width: 80px;
				height: 80px;/*将div盒子设置成正方形*/
				border: red dashed 1px;/*给div盒子，设置边框*/
				border-radius: 50%;/*将div盒子设置成圆形*/
				padding: 5px;/*设置div盒子的内填充属性,图片与边框之间

了解本专栏