CSS使用图片完美修饰的全兼容圆角框

最新推荐文章于 2022-06-20 12:06:47 发布

原创最新推荐文章于 2022-06-20 12:06:47 发布 · 495 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web前端

本文介绍了一种使用CSS实现的自定义圆角列表样式方法，该方法通过背景图片和CSS属性实现了美观的圆角效果，可以有效提升网页的视觉体验。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS列表圆角</title>
<style type="text/css">
* {padding:0; margin:0;}
body {background:#fff;}
.yuanjiao {background:#06c url(/jscss/demoimg/200910/topl.gif) no-repeat; width:380px; margin:0 auto;text-align: left; margin-top:60px;}
.yuanjiao dt{background:transparent url(/jscss/demoimg/200910/topr.gif) 100% 0 no-repeat; text-align:center; color:#fff; line-height:30px; font-weight:bold; font-size: 14px;}
.yuanjiao dd{background:#DCEAFC url(/jscss/demoimg/200910/botl.gif) 0 100% no-repeat; padding:0; margin:0;}
.yuanjiao p{padding: .8em;}
.yuanjiao p.last{background:transparent url(/jscss/demoimg/200910/botr.gif) 100% 100% no-repeat; line-height:22px; font-size: 12px;}
a {color:#06c;}
a:hover {color:#00f;}
</style>
</head>
<body>
<dl class="yuanjiao">
<dt>自定义的CSS列表圆角</dt>
<dd>
<p class="last">这个超漂亮的CSS圆角，用在你的网页一定很好看，为您增色不少。。。不是么？</p>
</dd>
</dl>
</body>
</html>