js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:首页 > 网页特效 > JS常用代码 > css样式

CSS配合背景图片实现列表圆角特效

发布时间:2015-09-10 08:13:28    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

CSS配合背景图片实现列表圆角特效
<!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(topl.gif) no-repeat; width:380px; margin:0 auto;text-align: left; margin-top:60px;}    
			.yuanjiao dt{background:transparent url(topr.gif) 100% 0 no-repeat; text-align:center; color:#fff; line-height:30px; font-weight:bold; font-size: 14px;}    
			.yuanjiao dd{background:#DCEAFC; padding:0; margin:0;}    
			.yuanjiao p{padding: .8em;}    
			.yuanjiao p.last{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>



圆角

纯css仿Facebook图片圆角特效

CSS配合背景图片实现列表圆角特效

纯css实现圆角特效代码

仿支付宝下拉圆角导航菜单