正文
jquery圆角,HTML5圆角
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
jQuery UI widgets IE 圆角化问题
给你一个我用的实现圆角的插件，ie-css3。
这个就是让IE 6,7,8支持部分的CSS3属性。
官网上有下载地址及使用注意。
作者官网：
注意看运行效果，需要部署本地服务器，使用服务器路径打开。
直接双击打开是看不到效果，还报错的。
给一个例子，我写的。
.borderRadius { border:#E6F2FB 1px solid; background:#fff; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; position:relative; z-index:2; behavior:url(js/ie-css3.htc);}
position:relative;这个必须有，不然没有效果。
相关问答
Q1: jquery 怎么获得css3属性的值？比如圆角？？
你确定你引入了jquery.js？var s = $("id").css(" ");这样是可以获取到样式属性的，不是说没有就没有，肯定哪里少了，仔细检查。
Q2: jquery，我给一div设置了border:1px solid red;想让这个border为圆角框。用哪个插件？我试了几个都不行
圆角，用两种方法样式的方法，一种就是重叠，用b style="border-top:1px solid #777777;height:1px;overflow:hidden;width:98px;"/b
b style="border-right:1px solid #777777;border:1px solid #777777;height:1px;overflow:hidden;width:100px;"/b
b style="border-right:1px solid #777777;border:1px solid #777777;height:50px;overflow:hidden;width:102px;"/b
用这种重叠的方法作出一个圆角，效果虽然比较差，但是平时的应用还是可以了。注意点就是overflow:hidden;一定要有，
还有一种就是用绝对定位的方法，切图切下圆角，定位。这样效果比较美观
Q3: 使用JQuery怎么实现鼠标移上去背景变圆角矩形?
如果是支持CSS3的浏览器，定义border-radius属性，就是盒模型的边界圆角，值越大越圆。
用jquery做的话，就是定义一个带border-radius的class，然后选择相应的元素，在hover事件中使用addClass方法添加这个class。
但是，这是不好的做法，或者说是dumb way。因为直接使用css的hover伪类就可以实现，完全不需要借助jquery或者说js
例如你的这几个div拥有一个class，title-div，那么只需要
.title-div:hover {
border-radius: 8px;
}
就可以实现鼠标一上去圆角。
不过要是需要兼容IE6/7/8这种不支持CSS3特性的浏览器，就得使用CSS3Pie之类的库，你可以搜索下，在官网上看看他介绍。
Q4: 如何使用jquery实现圆角矩形按钮？求大神帮忙！给出具体步骤，谢谢
你好，很高兴为你作答。
圆角按钮属于外观样式，他们是由CSS决定的，而使用CSS3能够轻松实现圆角按钮，如下代码：
!DOCTYPE html
html
head lang="en"
meta charset="UTF-8"
title圆角按钮/title
style
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
border: 1px solid transparent;
border-radius: 4px;
color: #fff;
background-color: #337ab7;
border-color: #2e6da4；
}
/style
/head
input type="button" id="button_equal" class="btn" value="我是圆角按钮"
body
/body
/html
Q5: jquery.corner 的圆角边框效果
下面的代码，另存为html运行就能看见效果：
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
HTML
HEAD
titlejs实现(层,表格)元素圆角的函数/title
META http-equiv=Content-Type content="text/html; charset=gb2312"
STYLEBODY {
FONT-SIZE: 12px; COLOR: #333333; TEXT-ALIGN: center
}
.round {
DISPLAY: inline; MARGIN: 5px; WIDTH: 200px; BACKGROUND-COLOR: lightblue
}
/STYLE
META content="MSHTML 6.00.2900.3243" name=GENERATOR/HEAD
BODY
DIV id=title style="MARGIN: 5px; WIDTH: 500px; BACKGROUND-COLOR: #e9afdf"
DIV
style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px"自动圆角函数BR
回到/DIV
/DIV
DIV class=round id=round1
DIV
style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px"样式1/DIV/DIV
DIV class=round id=round2
DIV
style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px"样式2/DIV/DIVBR
DIV class=round id=round3
DIV
style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px"样式3/DIV/DIV
DIV class=round id=round4
DIV
style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px"样式4/DIV/DIV
DIV id=a style="MARGIN: 5px; WIDTH: 500px; BACKGROUND-COLOR: #e9afdf"
DIV
style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px"说明:BRRoundCorner("欲圆角的元素ID"
[, 圆角样式 ]);BR圆角样式:可选参数,暂时有4种 /DIV/DIV
SCRIPT
RoundCorner("round1",1);
RoundCorner("round2",2);
RoundCorner("round3",3);
RoundCorner("round4",4);
RoundCorner("a",1);
RoundCorner("title",1);
function RoundCorner(obj,style)
{
/********
网页元素圆角函数!!
作者: Longbill
********/
var r = [];
var styles = [
{top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0 1px","0 1px","0 2px","0 3px","0 5px"]},
{top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0px","0px","0px","0px","0px"] },
{top:["0 0 0 5px","0 0 0 3px","0 0 0 2px","0 0 0 1px","0 0 0 1px"],bottom:["0 1 0 0px","0 1 0 0px","0 2 0 0px","0 3 0 0px","0 5 0 0px"]},
{top:["0 5 0 0px","0 3 0 0px","0 2 0 0px","0 1 0 0px","0 1 0 0px"],bottom:["0 0 0 1px","0 0 0 1px","0 0 0 2px","0 0 0 3px","0 0 0 5px"]}
]; //author: longbill.cn
if (!style || stylestyles.length) style = 1;
style--;
var btop = styles[style].top,bbottom = styles[style].bottom;
if (typeof obj == "string") obj = document.getElementById(obj);
var objp = obj.parentNode;
if (!obj || !objp) return;
var bg = '';
var cssProperty = "backgroundColor";
var mozillaEquivalentCSS = "background-color";
if (objp.currentStyle)
var actualColor = objp.currentStyle[cssProperty];
else
{
var cs = document.defaultView.getComputedStyle(objp, null);
var actualColor = cs.getPropertyValue(mozillaEquivalentCSS);
}
if (actualColor == "transparent" objp.parentNode) bg = arguments.callee(objp.parentNode);
else if (actualColor == null) bg = "#ffffff";
else bg = actualColor;
var HTML = obj.innerHTML;
obj.innerHTML = "";
for(var istop=1;istop=0;istop--)
{
var topborder = document.createElement("b");
topborder.style.display = "block";
topborder.style.height = "2px";
topborder.style.backgroundColor = bg;
for(var i=0;ibtop.length;i++)
{
var b = document.createElement("b");
if (obj.style.backgroundColor)
b.style.backgroundColor = obj.style.backgroundColor;
else if (obj.className)
b.className = obj.className;
b.style.display = "block";
b.style.margin = (istop)?btop[i]:bbottom[i];
b.style.height = "1px";
b.style.overflow = "hidden";
b.style.width = "auto";
topborder.appendChild(b);
}
obj.appendChild(topborder);
if (istop) obj.innerHTML+=HTML;
}
}
/SCRIPT
/BODY/HTML
