网页制作与设计怎么设置圆角（DIV+CSS如何通过圆角背景图片实现网页中插入的其他图片显示为圆角）

：暂无数据 2026-07-12 13:45:07 ：0

今天给各位分享DIV+CSS如何通过圆角背景图片实现网页中插入的其他图片显示为圆角的知识，其中也会对DIV+CSS如何通过圆角背景图片实现网页中插入的其他图片显示为圆角进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录

DIV+CSS如何通过圆角背景图片实现网页中插入的其他图片显示为圆角
如何用CSS为图片添加精美圆角外边框

DIV+CSS如何通过圆角背景图片实现网页中插入的其他图片显示为圆角

BODY里面的代码：

《ul class="sc1"》

《li》《a rel="sc" href="/p/uploadfile/201109/15/8712819728.jpg"》《img src="80x80.jpg" alt="海洋之心"/》《span》《/span》《/a》《/li》

《/ul》

CSS代码：

img {border:0;}

.sc1{padding:10px 0 45px;clear:both;width:930px;overflow:hidden}

.sc1 li{float:left;width:80px;margin:0 12px 12px 0;display:inline}

.sc1 img{width:80px;height:80px;display:block}

.sc1 a:hover img{filter:Alpha(Opacity=60);opacity:0.6}

.sc1 a span,.sc1 a:hover span{position:relative;margin:-80px 0 0 0;float:left;background:url(i.png) no-repeat;_background:url(i.gif) no-repeat;width:80px;height:80px;cursor:pointer}

i.png 这个是圆角背景图片

最后效果如图：

楼主自己试一下。还不懂的给我留言！

如何用CSS为图片添加精美圆角外边框

在网页制作过程中，为了美化界面的需要，网页设计者往往会选择给图片添加精美的圆角外边框，经过这样的设计可以起到十分显著的效果，使浏览者产生新颖别致的体验。实现该效果的方法很多，在此小编就从网页设计者的角度出发，来探讨一下利用CSS为图片添加精美圆角外边框的方法。需要特别提醒一点的是，网页设计应该具有更多的可扩展性和可重用性为最佳，下面设计的方法将会更能体现这一点。

首先根据实现图片的大小制作一个圆角边框。打开PS，新建一空白文档，文档的大小根据需要情况来定，在此小编将其设置为400*400,设置完成后点击”好“按钮。

选择工具栏上的”矩形“工具，在属性面板中将其半径设置为”20像素“，然后在绘图区绘制一个圆角矩形。

在该图层的空白区域右击，选择”栅格化图层“，将该图层转换成普通图层。

在按住键盘上的CTRL键同时，点击”形状1“图层，将当前图层内容选中。然后点击工具栏中的”填充“工具，设置一种合适的前景色，点击图形区域进行填充。

双击该形状1”图层，在打开的“图层样式”对话框中勾选 “斜面和浮雕”效果，并设置合适的参数后，点击“确定”完成设置。

点击“文件”菜单中的“存储为Web所有格式”，在打开的窗口中将输出的图片格式设置为“PNG-24”，最后点击“存储”进行保存。

打开Dreamweaver8，点击“文件”菜单，在打开的”新建文档“窗口中选择”基本页“→”HTML“，点击”创建“以新建一个网页文件。

点击”文件“→”另存为“，将该文件另存为”index.html"。

然后在该文档的代码区输入如图所示的代码：

点击“文件”→“在浏览器中预览”，然后选项其中的一个浏览器进行预览，效果如图所示。

文章分享结束，网页制作与设计怎么设置圆角和DIV+CSS如何通过圆角背景图片实现网页中插入的其他图片显示为圆角的答案你都知道了吗？欢迎再次光临本站哦！

网页制作与设计怎么设置圆角（DIV+CSS如何通过圆角背景图片实现网页中插入的其他图片显示为圆角）