圆角边框
如题，圆角边框即是角是圆形的框子。
效果图如下：
HTML代码：
Code<!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>
<title>1</title>
<style type="text/css">
body {
margin: 20px;
font: 11px "lucida grande",verdana,sans-serif;
}
#rc {
width:300px;
background-color:#C3D9FF;
color:#565B78;
padding: 10px 10px 10px 10px
}
#rc p {
margin: 0 0 0 0
}
#rc2 {
width:300px;
background-color:#313131;
color:#fff;
padding: 20px 20px 20px 20px
}
</style>
<script type="text/javascript" src="createRound.js"></script>
<script type="text/javascript">
function init() {
AddRoundCorner("rc");
AddRoundCorner("rc2");
}
</script>
</head>
<body onload="init()">
<div id="rc">
<p>这是使用JavaScript动态实现的圆角边框，
其中尚有很多不足之处以待改进。<br><br><br><br>
</p>
</div>
<br>
<div id="rc2">
这是使用JavaScript动态实现的圆角边框，
其中尚有很多不足之处以待改进。<br><br><br><br>
</div>
</body>
</html>
JS:
Codefunction $(id) {return document.getElementById(id);}
function setStyle(ele,style) {
for (p in style)
{ele.style[p] = style[p];}
}
function getStyle(ele,name) {
var style = ele.currentStyle?ele.currentStyle:document.defaultView.getComputedStyle(ele,null);
return style[name];
}
var basicStyle = {
"display": "block",
"overflow": "hidden",
"height": "1px",
"fontSize": "1px"
};
function createB1(borderColor,bgColor,width) {
var b = document.createElement("b");
setStyle(b,basicStyle);
var style = {"margin":"0 6px","backgroundColor":bgColor};
setStyle(b,style);
return b;
}
function createB2(borderColor,bgColor,width) {
var b = document.createElement("b");
setStyle(b,basicStyle);
var style = {
"margin":"0 4px",
"borderLeft": (width/2-4) + "px solid " + borderColor,
"borderRight": (width/2-4) + "px solid " + borderColor,
"backgroundColor":bgColor
};
setStyle(b,style);
return b;
}
function createB3(borderColor,bgColor,width) {
var b = document.createElement("b");
setStyle(b,basicStyle);
var style = {
"margin":"0 3px",
"borderLeft": (width/2-3) + "px solid " + borderColor,
"borderRight": (width/2-3) + "px solid " + borderColor,
"background-color":bgColor};
setStyle(b,style);
return b;
}
function createB4(borderColor,bgColor,width) {
var b = document.createElement("b");
setStyle(b,basicStyle);
var style = {
"margin":"0 2px",
"borderLeft": (width/2-2) + "px solid " + borderColor,
"borderRight": (width/2-2) + "px solid " + borderColor,
"background-color":bgColor};
setStyle(b,style);
return b;
}
function createB5(borderColor,bgColor,width) {
var b = document.createElement("b");
setStyle(b,basicStyle);
var style = {
"height": "2px",
"margin": "0 1px",
"borderLeft": (width/2-1) + "px solid " + borderColor,
"borderRight": (width/2-1) + "px solid " + borderColor,
"background-color":bgColor};
setStyle(b,style);
return b;
}
function createTop(borderColor,bgColor,width) {
var b = document.createElement("b");
b.appendChild(createB1(borderColor,bgColor,width));
b.appendChild(createB2(borderColor,bgColor,width));
b.appendChild(createB3(borderColor,bgColor,width));
b.appendChild(createB4(borderColor,bgColor,width));
b.appendChild(createB5(borderColor,bgColor,width));
return b;
}
function createBottom(borderColor,bgColor,width) {
var b = document.createElement("b");
b.appendChild(createB5(borderColor,bgColor,width));
b.appendChild(createB4(borderColor,bgColor,width));
b.appendChild(createB3(borderColor,bgColor,width));
b.appendChild(createB2(borderColor,bgColor,width));
b.appendChild(createB1(borderColor,bgColor,width));
return b;
}
function AddRoundCorner(id) {
var originEle = $(id);
var width = parseInt(getStyle(originEle,"width"));
var paddingLeft = parseInt(getStyle(originEle,"paddingLeft"));
var paddingRight = parseInt(getStyle(originEle,"paddingRight"));
var borderColor = getStyle(originEle,"backgroundColor");
var bgColor = getStyle(originEle,"backgroundColor");
var wrapper = document.createElement("div");
var totalWidth = width+paddingLeft+paddingRight;
setStyle(wrapper,{"width":totalWidth+"px"});
originEle.parentNode.insertBefore(wrapper,originEle);
var top = createTop(borderColor,bgColor,totalWidth);
wrapper.appendChild(top);
wrapper.appendChild(originEle);
var bottom = createBottom(borderColor,bgColor,totalWidth);
wrapper.appendChild(bottom);
}
浙公网安备 33010602011771号