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

纯css实现圆角特效代码

发布时间:2017-01-06 10:12:56    您是第0位浏览者

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

纯css实现圆角特效代码

纯css实现圆角特效代码

<html>    
	<head>    
		<style>    
			td{font-size:9pt;word-break: break-all}    
			.corner{font-size:0;}    
			.corner_bo{background:blue}    
			.corner_bg{background:#6699ff}    
			#tit{height:22px;color:white;}    
			#txt{line-height:150%;background:white;border:1px solid blue}    
			#tl,#tr,#bl,#br,#corner_tl,#corner_tr,#corner_bl,#corner_br{width:3px;height:3px}    
			#t,#b,#corner_t,#corner_b{height:3px}    
			#l,#r,#corner_l,#corner_r{width:3px}    
		</style>      
	</head>    
	<body>    
		<table cellpadding="0" cellspacing="0" width="400" align="center">    
			<tbody>    
				<tr>    
					<td id="tl">    
					</td>    
					<td id="t">    
					</td>    
					<td id="tr">    
					</td>    
				</tr>    
				<tr>    
					<td id="l">    
					</td>    
					<td id="box">    
						<table cellpadding="3" cellspacing="0" width="100%">    
						<tbody>    
						<tr id="tit">    
							<td>    
								<b>圆角特效代码</b>    
							</td>    
						</tr>    
						<tr>    
							<td height="200" id="txt">    
								<br/>    
							</td>    
						</tr>    
						</tbody>    
						</table>    
					</td>    
					<td id="r">    
					</td>    
				</tr>    
				<tr>    
					<td id="bl">    
					</td>    
					<td id="b">    
					</td>    
					<td id="br">    
					</td>    
				</tr>    
			</tbody>    
		</table>    
		<script type="text/javascript">    
			function setcorner(id) {    
				var html;    
				if (id == "t") {    
					html = "<table class=corner id=corner_t cellpadding=0 cellspacing=0>"    
					html += "<tr><td class=corner_bo></td></tr><tr><td class=corner_bg></td></tr><tr><td class=corner_bg></td></tr>"    
					html += "</table>"    
				}    
				if (id == "b") {    
					html = "<table class=corner id=corner_b cellpadding=0 cellspacing=0>"    
					html += "<tr><td class=corner_bg></td></tr><tr><td class=corner_bg></td></tr><tr><td class=corner_bo></td></tr>"    
					html += "</table>"    
				}    
				if (id == "l") {    
					html = "<table class=corner id=corner_l cellpadding=0 cellspacing=0>"    
					html += "<tr><td class=corner_bo></td><td class=corner_bg></td><td class=corner_bg></td></tr>"    
					html += "</table>"    
				}    
				if (id == "r") {    
					html = "<table class=corner id=corner_r cellpadding=0 cellspacing=0>"    
					html += "<tr><td class=corner_bg></td><td class=corner_bg></td><td class=corner_bo></td></tr>"    
					html += "</table>"    
				}    
				if (id == "tl") {    
					html = "<table class=corner id=corner_tl cellpadding=0 cellspacing=0>"    
					html += "<tr><td bgcolor=white></td><td bgcolor=white></td><td class=corner_bo></td></tr>"    
					html += "<tr><td bgcolor=white></td><td class=corner_bo></td><td class=corner_bg></td></tr>"    
					html += "<tr><td class=corner_bo></td><td class=corner_bg></td><td class=corner_bg></td></tr>"    
					html += "</table>"    
				}    
				if (id == "tr") {    
					html = "<table class=corner id=corner_tr cellpadding=0 cellspacing=0>"    
					html += "<tr><td class=corner_bo></td><td bgcolor=white></td><td bgcolor=white></td></tr>"    
					html += "<tr><td class=corner_bg></td><td class=corner_bo></td><td bgcolor=white></td></tr>"    
					html += "<tr><td class=corner_bg></td><td class=corner_bg></td><td class=corner_bo></td></tr>"    
					html += "</table>"    
				}    
				if (id == "bl") {    
					html = "<table class=corner id=corner_bl cellpadding=0 cellspacing=0>"    
					html += "<tr><td class=corner_bo></td><td class=corner_bg></td><td class=corner_bg><td class=corner_bg></tr>"    
					html += "<tr><td bgcolor=white></td><td class=corner_bo></td><td class=corner_bg></td></tr>"    
					html += "<tr><td bgcolor=white></td><td bgcolor=white></td><td class=corner_bo></td></tr>"    
					html += "</table>"    
				}    
				if (id == "br") {    
					html = "<table class=corner id=corner_br cellpadding=0 cellspacing=0>"    
					html += "<tr><td class=corner_bg></td><td class=corner_bg></td><td class=corner_bo></td></tr>"    
					html += "<tr><td class=corner_bg></td><td class=corner_bo></td><td bgcolor=white></td></tr>"    
					html += "<tr><td class=corner_bo></td><td bgcolor=white></td><td bgcolor=white></td></tr>"    
					html += "</table>"    
				}    
				eval(id + ".innerHTML=html")    
			}    
			function corner(border, bgcolor) {    
				setcorner("tl")    
				setcorner("tr")    
				setcorner("bl")    
				setcorner("br")    
				setcorner("t")    
				setcorner("b")    
				setcorner("l")    
				setcorner("r")    
				corner_t.style.width = box.offsetWidth    
				corner_b.style.width = box.offsetWidth    
				corner_l.style.height = box.offsetHeight    
				corner_r.style.height = box.offsetHeight    
				box.style.background = bgcolor    
			}    
			corner("blue", "#6699ff");    
		</script>    
	</body>    
</html>



css 圆角

仿美图秀秀官网,纯CSS二级下拉导航菜单特效

jQuery+CSS3 实现动画图片相册,大图全屏展示,前后翻页特效代码

Css3鼠标悬停图片高亮特效

css3鼠标滑过栏目图片滑动切换动画特效

纯css实现QQ音乐返回顶部和返回底部的快捷导航代码

css3对话框插件来制作动画弹出表单特效

css3实现网页后台登录界面

css3发蓝光的input输入框样式特效

css3图片特效,利用transform属性制作相册图片墙

css3实现响应式组织架构图

css3猎豹浏览器宽屏banner焦点图切换特效

CSS3实现手风琴叠加图片自动轮播特效

css3实现图标菜单,鼠标滑过图标动画菜单特效

css3旋转动画,制作鼠标经过圆形旋转特效

纯css+div绿色实现下拉导航分类菜单特效

jquery css3实现黑色酷炫数字时钟特效

js+css3 实现扁平化APP图标黄色时钟,动画特效

纯CSS3实现漂亮的价格表样式特效

div+css实现网页右侧返回顶部样式特效

css3实现多款实用的网页鼠标滑动按钮动画特效

友荐云推荐
大家说 此评论不代表本站观点