-
网页设计中常用的19个Web安全字体 多数情况下，考虑各个因素的影响我们还是在尽量充分利用这些默认调用的字体实现CSS的编写，这里整理了19个Web安全字体，让你无需任何顾虑的情况下畅快使用。1, Arial微软公司的网页核心字体之一，最常用的sans serif字体，当字号很小时不容易阅读。但是，大写的“I”和小写的“l”是无法区别的，你可以考虑用Tahoma字体来替代。（苹果系统没有这种字体，但有一种对应于Arial的字体叫Helvetica，它是MAC机上与Arial 字体最相似的WEB字体,是别一种非衬线字体.它是一种性能优良的打印字体,但在屏幕上表现不是很好，说道Helvetica字体，昨天发现了很多有意思的站点，主要是纪念Helvetica字体诞生50年而设的。）CSS写法：font-family: Arial, Helvetica, sans-serif;2, Arial BlackCSS写法：font-family: ‘Arial Black’, Gadget, sans-serif;3, Arial NarrowCSS写法：font-family: ‘Arial Narrow’, sans-serif;4, Verdana微软公司的网页核心字体之一，微软公司专门为屏幕显示而开发的。应用广泛。易于阅读。是显示器中最清晰的字体，即使字号很小，也很容易阅读。半肥猫比较喜欢采用10PX的Verdana来做英文正文字体，也推荐大家使用，但字号最好介于10~14像素之间，超出这个范围就不好看了。CSS写法：font-family: Verdana, Geneva, sans-serif;5, Georgia微软公司的网页核心字体之一，可用性好。可读性比Times New Roman强。是网站设计中，浏览效果最好的serif字体，因为它是专为网上阅读设计的。）CSS写法：font-family: Georgia, serif;6, Times New Roman微软公司的网页核心字体之一，可能是最常用的serif字体，是网站浏览器默认的字体，12pt以上的字体容易阅读，但小字号的字体易读性差。（苹果系统没有这个字体，有一个对应于Times New Roman的字体叫Times）CSS写法：font-family: 'Times New Roman', Times, serif;7, Trebuchet MS微软公司的网页核心字体之一，与Arial相似，半肥猫觉得：Trebuchet MS比Arial看起来优雅、古典一点。可以用来做标题，但小字号阅读起来会很困难（低于13PIX阅读起来就很累了，不太推荐用来做正文字体）。在苹果系统上也可以用Helvetica做替代。CSS写法：font-family: 'Trebuchet MS', Helvetica, sans-serif;8 , Courier New微软公司的网页核心字体之一，老式打印机字体，有一种独特的机械工整感觉。呈现计算机编码时，还会用到这种字体。12 pt的Courier New字体曾是美国国务院的公文标准字体，但于2004年1月停用，改使用14 pt的Times New Roman，因为其具“现代性”和“易读性”。CSS写法：font-family: 'Courier New', Courier, monospace;9, Impact微软公司的网页核心字体之一，Impact是1965年发表的一个无衬线字体，其特粗的笔画、紧缩的间距。半肥猫觉得：字体较为粗犷，适合使用在标题上，而不常用在内文。CSS写法：font-family: Impact, Charcoal, sans-serif;10, Comic Sans MS微软公司的网页核心字体之一，手写体。这是一种争议很大的字体，讲实话，半肥猫也不喜欢这个字体，一点美感都没有，不过在一大堆规规矩矩的字体里面，有这么一个随意性比较的字体，可以变换一下口味，也算不错吧，建议不要用在正规的金融、政府、商业机构站点。CSS写法：font-family: 'Comic Sans MS', cursive;11, TahomaTahoma是一个十分常见的无衬线字体，Tahoma和Verdana师出同为名设计师马修·卡特的作品，由微软在1999年推出，被采用为Windows 2000、Windows XP、Windows Server 2003等系统的默认字型。半肥猫觉得：它的字体结构和Verdana很相似，其字符间距较小，用来作为标题，效果好过Arial（Tahoma的大写I 和小写l比Arial容易识别），但如果作为正文，他的字号不能小于13PIX，否则很多笔画粘连到一起，不利于阅读。CSS写法：font-family: Tahoma, Geneva, sans-serif;12, CourierCourier是一个等宽字体的粗衬线字体，主要是依据打字机所打印出来的字型来设计。原来Courier New的字体是IBM公司在1950年代设计给打印机使用的字体，后来这个字型成为整个打字机制造业的标准。Courier New是Courier的变体，比Courier更具机械味道。CSS写法：font-family: Courier, monospace;13, Lucida Sans Unicode是一种OpenType型的无衬线字体 。1993年制作并随微软公司的Windows NT 3.1操作系统发布。有较大的x字高，具有很好的可读性，被广泛用于显示、出版等各种用途。它支持Unicode2.0版本的基本字符，包括拉丁字母，希腊字母，西里尔字母，希伯来字母，以及国际音标字符。该字体是首个 Unicode代码的字体， 该字体从Windows 98开始一直作为系统预装字体发行。后来发布的 Lucida Grande字体作为苹果公司Mac OS X系统的默认字体发布。CSS写法：font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;14, Lucida Console同Lucida Sans Unicode类似。CSS写法：font-family: 'Lucida Console', Monaco, monospace;15, GaramondGaramond（加拉蒙德）是一类西文衬线字体的总称，自16世纪40年代开始至今，有很多家公司和很多设计师参与到Garamond字体设计，如： Adobe Garamond, Monotype Garamond, Sioncini Garamond，和 Stempel Garamond等等。半肥猫觉得：字体给人端庄典雅，有些古典的感觉，在博物馆和历史性悠久的项目中使用，应该可以获得不错的效果。CSS写法：font-family: Garamond, serif;16 , MS Sans Serif微软系统自带字体。屏幕显示的像素字体。非衬线字体。CSS写法：font-family: 'MS Sans Serif', Geneva, sans-serif;17 , MS Serif微软系统自带字体。屏幕显示的像素字体。衬线字体。CSS写法：font-family: 'MS Serif', 'New York', sans-serif;18, Palatino LinotypeCSS写法：font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;19, SymbolCSS写法：font-family: Symbol, sans-serif;20, Bookman Old StyleCSS写法：font-family: 'Bookman Old Style', serif;本文参考了WEB安全字体，希望在Web编写过程中这些核心的Web字体能对你有用。 -
CSS 按钮 样式 基本按钮样式 默认按钮 CSS 按钮 实例 .button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } 按钮颜色 我们可以使用 background-color 属性来设置按钮颜色: 实例 .button1 {background-color: #4CAF50;} /* 绿色 */ .button2 {background-color: #008CBA;} /* 蓝色 */ .button3 {background-color: #f44336;} /* 红色 */ .button4 {background-color: #e7e7e7; color: black;} /* 灰色 */ .button5 {background-color: #555555;} /* 黑色 */ 按钮大小 我们可以使用 font-size 属性来设置按钮大小: 实例 .button1 {font-size: 10px;} .button2 {font-size: 12px;} .button3 {font-size: 16px;} .button4 {font-size: 20px;} .button5 {font-size: 24px;} 圆角按钮 我们可以使用 border-radius 属性来设置圆角按钮: 实例 .button1 {border-radius: 2px;} .button2 {border-radius: 4px;} .button3 {border-radius: 8px;} .button4 {border-radius: 12px;} .button5 {border-radius: 50%;} 按钮边框颜色 我们可以使用 border 属性设置按钮边框颜色: 实例 .button1 { background-color: white; color: black; border: 2px solid #4CAF50; /* Green */ } ... 鼠标悬停按钮 我们可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。 提示: 我们可以使用 transition-duration 属性来设置 "hover" 效果的速度: 实例 .button { -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; } .button:hover { background-color: #4CAF50; /* Green */ color: white; } ... 按钮阴影 我们可以使用 box-shadow 属性来为按钮添加阴影: 实例 .button1 { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); } .button2:hover { box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); } 禁用按钮 我们可以使用 opacity 属性为按钮添加透明度 (看起来类似 "disabled" 属性效果)。 提示: 我们可以添加 cursor 属性并设置为 "not-allowed" 来设置一个禁用的图片: 实例 .disabled { opacity: 0.6; cursor: not-allowed; } 按钮宽度 默认情况下，按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。 我们可以使用 width 属性来设置按钮的宽度: 提示: 如果要设置固定宽度可以使用像素 (px) 为单位，如果要设置响应式的按钮可以设置为百分比。 实例 .button1 {width: 250px;} .button2 {width: 50%;} .button3 {width: 100%;} -
如何用CSS实现背景图片自适应？ 用background-size属性，你想给他多大的百分比都可以，不设置表示默认图片大小，设置100%表示全屏显示图片，按比例缩小或者放大。 例如： .picLUp{ background:url(http://img.w3cschool.cn/attachments/knowledge/201610/14632.png) no-repeat; width:100%; height:40%; background-size:100% 100%; } 这样就可以实现背景图片自适应父容器大小而自动变化，达到填充效果。 但是，图片会被拉伸填充，这并不是我们想要的效果，那么我们可以不设置 100% 参数，而是使用 cover 参数 background-size:cover 设置cover参数以后，背景图会按比例缩放填充满整个背景。 如果使用IE浏览器你会发现，上面的 background-size:100% 100%; 并没有起到作用，图片原本是怎样就怎样显示，比较大就只能显示一部分。 所以这时需要使用IE特有的滤镜 AlphaImageLoader 兼容性在IE5.5+以上版本的浏览器上都可以完美运行。 AlphaImageLoader 语法: filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL ) AlphaImageLoader 属性： enabled: 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false_ true: 默认值。滤镜激活。false: 滤镜被禁止。sizingMethod: 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。crop: 剪切图片以适应对象尺寸。image: 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。scale: 缩放图片以适应对象的尺寸边界。src: 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。特性: Enabled: 可读写。布尔值(Boolean)。参阅 enabled 属性。sizingMethod: 可读写。字符串(String)。参阅 sizingMethod 属性。src: 可读写。字符串(String)。参阅 src 属性。说明: 在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。 PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容 hello{ width:10%; height:50%; position:absolute; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img.w3cschool.cn/attachments/knowledge/201610/14632.png',sizingMethod='scale'); } 这样我们就可以完美兼容绝大多数的浏览器，实现用CSS让背景图片100%填充了。 -
css里怎样设置字体大小和字体颜色 在 CSS 中，可以通过以下属性设置字体大小和颜色：1. 设置字体大小（font-size）selector { font-size: 值; }常用单位：px：像素（绝对单位，如 16px）em：相对单位（基于父元素字体大小，如 1.5em）rem：相对单位（基于根元素 <html> 的字体大小，如 1.2rem）%：百分比（如 120%）vw/vh：视窗宽度/高度的百分比（如 2vw）示例：p { font-size: 16px; /* 固定像素 */ } h1 { font-size: 2em; /* 父元素字体大小的2倍 */ } body { font-size: 1.2rem; /* 根元素字体大小的1.2倍 */ }2. 设置字体颜色（color）selector { color: 颜色值; }颜色值的写法：颜色名称：如 red, blue, green十六进制：如 #ff0000（红色），简写 #f00RGB/RGBA：如 rgb(255, 0, 0) 或 rgba(255, 0, 0, 0.5)（带透明度）HSL/HSLA：如 hsl(0, 100%, 50%)（色相、饱和度、亮度）示例：h1 { color: #333; /* 深灰色 */ } .highlight { color: rgb(255, 0, 0); /* 红色 */ } .transparent-text { color: rgba(0, 0, 255, 0.7); /* 半透明蓝色 */ }完整示例<style> .title { font-size: 24px; color: #ff5722; /* 橙色 */ } .subtitle { font-size: 1.5rem; color: hsl(210, 100%, 50%); /* 亮蓝色 */ } .small-text { font-size: 0.8em; color: rgba(0, 0, 0, 0.6); /* 半透明黑色 */ } </style> <h1 class="title">这是标题</h1> <p class="subtitle">这是副标题</p> <p class="small-text">这是小号文字</p>注意事项：响应式设计：建议优先使用 rem 或 em 单位，便于整体调整字体大小。可访问性：确保颜色对比度足够（如深色文字配浅色背景）。继承性：color 属性会被子元素继承，但 font-size 的具体表现取决于使用的单位（如 em 基于父元素，rem 基于根元素）。如果需要同时设置字体家族，可以结合 font-family 使用：body { font-family: "Arial", sans-serif; font-size: 1rem; color: #333; } -
CSS字体样式值 字体样式 font-weight: 文字粗细 normal: 默认值，标准粗细 bold：粗体 bolder：更粗 lighter：更细 100~900：设置具体粗细，400等同于normal，而700等同于bold inherit：继承父元素字体的粗细值 <style> .c1 {font-weight: bold;} #p2 {font-weight: bolder;} #p3 {font-weight: lighter;} #p4 {font-weight: 500;} #p5 {font-weight: inherit;} </style> <p>石灰吟</p> <hr> <p id="p1" class="c1">千锤万凿出深山</p> <hr> <p id="p2">，烈火焚烧若等闲</p> <hr> <p id="p3">。粉身碎骨全不怕</p> <hr> <p id="p4">要留清白在人间</p> <hr> <ul class="c1"> <li> <p id="p5">于谦 [明代]</p> </li> </ul>复制代码 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 文字风格 font-style: -- 文字风格 normal; -- 正常，默认就是正常的 italic; -- 倾斜 <style> #p1 {font-style: italic;} #p2 {font-style: normal;} </style> <p id="p1">死去元知万事空，但悲不见九州同</p> <hr> <p id="p2">王师北定中原日，家祭无忘告乃翁</p>复制代码 1. 2. 3. 4. 5. 6. 7. 8. 字体大小 一般是12px或13px或14px 注意： 1、通过font-size设置文字大小一定要带单位，即一定要写px; 2、如果设置成inherit表示继承父元素的字体大小值。 <style> #p1 {font-size: 20px} .c1 {font-size: 25px} #p2 {font-size: inherit} </style> <p id="p1">竹石</p> <div class="c1" > <p>咬定青山不放松，立根原在破岩中</p> <a id="p2">千磨万击还坚劲，任尔东西南北</a> </div>复制代码 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 文字字体 font-family: -- 字体风格 常见字体： serif 衬线字体 sans-serif 非衬线字体 中文：宋体，微软雅黑，黑体 注意： 设置的字体必须是用户电脑里已经安装的字体，浏览器会使用它可识别的第一个值。 如果取值为中文，需要用单或双引号扩起来 <style> #p1 {font-family: "微软雅黑"} #p2 {font-family: "宋体"} #p3 {font-family: "华文行楷"} #p4 {font-family: "华文隶书"} #p5 {font-family: "华文细黑"} #p6 {font-family: "华文楷体"} </style> <p id="p1">采桑子.重阳</p> <p id="p2">人生易老天难老，岁岁重阳。</p> <p id="p3">今又重阳，战地黄花分外香。</p> <p id="p4">一年一度秋风劲，</p> <p id="p5">不似春光。</p> <p id="p6">胜似春光，廖廓江天万里霜。</p>复制代码 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 字体颜色 color：rgb(123,123,123); -- 字体三原色拼凑字体颜色 color：red; -- 预设颜色 登录后复制 <style> #p1 {color: red} #p2 {color: blueviolet} #p3 {color: blue} #p4 {color: #00ff88} #p5 {color: rgb(123, 123, 123) } </style> <p id="p1">人生易老天难老，岁岁重阳。</p> <p id="p2">今又重阳，战地黄花分外香。</p> <p id="p3">一年一度秋风劲，</p> <p id="p4">不似春光。</p> <p id="p5">胜似春光，廖廓江天万里霜。</p>复制代码 ----------------------------------- CSS字体样式值 -
HTML+CSS+JS实现雪花飘扬 使用HTML+CSS+JS如何实现下雪特效？下面本篇文章给大家分享一个HTML+CSS+JS实现雪花飘扬的示例，希望对大家有所帮助。 很多南方的小伙伴可能没怎么见过或者从来没见过下雪，今天我给大家带来一个小Demo，模拟了下雪场景，首先让我们看一下运行效果 可以点击看看在线运行：http://haiyong.site/xiaxue 首先看看项目结构，一张雪花图片，一个.html文件和 jquery-1.4.2.js 用到的雪花图片我放在这里了，或者可以直接用图片地址：https://img.php.cn/upload/article/000/000/024/61dea8bfbe598211.png 开局一张图，内容全靠JS。 HTML代码 下面这是 html 里的内容，没啥东西 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>海拥| 雪一片一片</title> <meta name="viewport" content="width=device-width,user-scalable=no"> <meta name="keywords" content="雪一片一片" /> <meta name="description" content="工具 | 雪一片一片；立志打造一个拥有100个小游戏的摸鱼网站。Made By Haiyong，技术支持——海拥" /> <meta name="author" content="海拥(http://haiyong.site/moyu)" /> <meta name="copyright" content="海拥(http://haiyong.site/moyu)" /> <link rel="icon" href="http://haiyong.site/wp-content/uploads/2021/07/cropped-59255587-1-192x192.jpg" sizes="192x192" /> <style type="text/css"> body{ background-color: #000000; margin: 0;/* 去掉自带的外边距 */ } img{ position: absolute; } </style> </head> <body> <script src="js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script> </body></html> JS代码： 首先开启定时器添加雪花图片，这里的<img src='images/snow.png'>可以改成<img src='http://haiyong.site/wp-content/uploads/2021/12/snow.png' setInterval(function(){var img = $("<img src='images/snow.png'>"); $("body").append(img); 这里设置雪花的尺寸为10-20px,下面的公式即表示(0-10 + 10)px var size = parseInt(Math.random()*11)+10; img.css("width",size+"px"); 得到屏幕宽度 var w = $(window).width(); 取值范围应该是0-屏幕宽度-雪花宽度 var left =parseInt(Math.random()*(w-size)); 把得到的随机1eft给到图片 img.css("left",left+"px"); 添加雪花移动的动画，得到雪花移动的距离 = 屏幕高度-雪花尺寸 var top = $(window).height()-size; 下面注释中的代码是用来清除缓存的，可加可不加。 img.animate({"top":top+"px"},size*100) /* .fadeOut(1000,function(){ //当动画完成时执行此代码，清除缓存 img.remove(); //console.log($("img").length); }); */ },10) 取消注释就会看到落下的雪会消失，如下图所示 喜欢看积雪就可以把它注释掉，预览效果像下面这样 到这里我们要实现的效果就完成了，如果运行时间过长可能会导致内存占用过多造成卡顿现象，可以将html代码中的最后一段注释里的内容取消注释，这样到下面的积雪就会慢慢淡出并且remove删除了，不过我觉得积雪也挺好看的，就没让它融化，像下面这样： -
css里面怎么让body内容居中 css里面让body内容居中的方法：1、使用margin设置边距“0 auto”让HTML页面中所有的元素水平居中；2、将div距离页面窗口左边框和上边框的距离设置为“50%”；3、通过jQuery实现水平和垂直居中。 本教程操作环境：Windows7系统、HTML5&&CSS3版，DELL G3电脑。 推荐：css视频教程 我们在设计页面的时候，经常要把DIV居中显示，而且是相对页面窗口水平和垂直方向居中显示，如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让DIV居中。在本文中，我将给大家讲述如何用CSS和jQuery两种方法让DIV水平和垂直居中。 CSS让DIV水平居中 说明，本文中所指的DIV包括HTML页面中所有的元素。 让一个DIV水平居中，直接用CSS就可以做到。只要设置了DIV的宽度，然后使用margin设置边距0 auto，CSS自动算出左右边距，使得DIV居中。 复制代码.mydiv{ margin:0 auto; width:300px; height:200px; } 但是如果要使DIV垂直方向也居中，恐怕CSS需要修改了 CSS实现水平和垂直居中 要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。 复制代码.mydiv{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px } 该方法使用普遍，但是前提是必需设置DIV的宽度和高度。如果当页面DIV宽度和高度是动态的，比方说需要弹出一个DIV层并且要居中显示，DIV的内容是动态的，所以宽度和高度也是动态的，这时需要用jQuery可以解决居中。 jQuery实现水平和垂直居中 jQuery实现水平和垂直居中的原理就是通过jQuery设置DIV的CSS，获取DIV的左、上的边距偏移量，边距偏移量的算法就是用页面窗口的宽度减去该DIV得宽度，得到的值再除以2即左偏移量，右偏移量算法相同。注意DIV的CSS设置要在resize()方法中完成，就是每次改变窗口大小时，都要执行设置DIV的CSS，代码如下： 复制代码$(window).resize(function(){ $(".mydiv").css({ position: "absolute", left: ($(window).width() - $(".mydiv").outerWidth())/2, top: ($(window).height() - $(".mydiv").outerHeight())/2 }); }); 此外在页面载入时，就需要调用resize()。 复制代码$(function(){ $(window).resize(); }); 此方法的好处就是不需要知道DIV的具体宽度和高度大小，直接用jQuery就可以实现水平和垂直居中，而且兼容各浏览器，这个方法在很多的弹出层效果中应用。 ps:如果该div的宽度大于页面的宽度，那么需要对body添加一个css 复制代码<style type="TEXT/CSS">body{width:100%; overflow:hidden}</style> 以上就是css里面怎么让body内容居中的详细内容！ -
css怎么设置图片圆角 css设置图片圆角的方法：首先打开相应的代码文件；然后通过在<style>标签内添加代码如“-moz-border-radius:10px;-webkit-border-radius:10px;”来设置图片圆角即可。 本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。 CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。 代码实例： border-radius: 15px; 把下列代码添加进入你的<style>标签内 img { border-radius: 10px; /* 统一设置四个角的圆角半径 */ } 进阶用法 单独设置每个角： img { border-radius: 10px 20px 30px 40px; /* 顺序：左上 右上 右下 左下 */ } 2.椭圆形圆角（将图片变为圆形）： img { border-radius: 50%; /* 宽度和高度的50% */ /* 确保图片是正方形，否则会变成椭圆 */ width: 200px; height: 200px; object-fit: cover; /* 保持比例裁剪 */ } 示例代码 <style> .rounded-img { border-radius: 15px; width: 300px; } .circle-img { border-radius: 50%; width: 150px; height: 150px; object-fit: cover; } </style> <img class="rounded-img" src="your-image.jpg" alt="圆角图片"> <img class="circle-img" src="your-image.jpg" alt="圆形图片"> 清空缓存，看看效果吧（部分IE版本可能不支持）