您的位置：首页 > Web前端 > CSS

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

2016-07-11 10:59 656 查看
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航