js图片圆角_有没有一种js代码可以使div变成圆角边框

① div如何设置圆角图形

div用CSS设定圆角的话，只有一个属性border-radius，但是该属性IE8都不能支持，只能在firefox、chorme等浏览器中看到。如果想在IE8或以下的浏览器中看到，只能找js 代码实现。
有人写过专门的做圆角用的js代码，你可以搜搜看，印象中做成了corner函数，直接调用即可。

② Javascript圆角Div问题

div.style.border.radius="10px";

改为
div.style.borderRadius="10px"; //请注意大小写

第二个问题的解决方法也同上。

③ dede图片样式显示圆角，静态的用样式border-radius就可以，动态的怎么做，还是加js特效

其实能用css写的，都可以用js写，js通过事件去设置border-radius的css属性就可以了。

<divid="div"style="width:200px;height:200px;border:1pxsolidred;border-radius:"></div>
<buttonid="btn">按钮</button>

<script>
window.onload=function(){
document.getElementById('btn').onclick=function(){
document.getElementById('div').style.borderRadius='40px';
}
}
</script>

点击按钮就可以设置边框为圆角，

④ 有没有一种js代码可以使div变成圆角边框

用CSS样式吧，比js好
有的浏览器会禁止执行脚本，那样就无效了
CSS就不会

<html>
<head>
<title>css圆角效果</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFFFFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>

<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
无图片实现圆角框
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
<br>

<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<br>无图片实现圆角框<br><br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>

⑤ 如何使用CSS+DIV或者jsp实现任意一张图片让它以圆角的样子显示

嗯。用CSS3 可以实现盒子模型的圆角。例如（border-radius: 8px; 表示8px 圆角半径）至于图片的话，要JS/JQ处理了。
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
各浏览器兼容、 CSS3 盒子圆角。

⑥ JS怎么把图片做成圆角形式谢谢

用CSS。
可以利用js 控制图像的CSS，达到这个效果。
如果是HTML5的话，就更方便了。

⑦ js如何点击左右按钮切换图片

这样：

<!DOCTYPE html>

<html>

<head>

<title>动态切换图片</title>

</head>

<style>

ul{

padding:0;margin:0;

}

li{

list-style: none;

}

#pic{

position: relative;

width: 400px;

height: 400px;

background-color:red;

margin:100px auto;

background:url('image/1.jpg') no-repeat center;

}

#pic img{

width: 400px;

height: 400px;

}

#pic ul{

width: 50px;

position: absolute;

top: 0;

right: -70px;

}

li{

width: 40px;

height: 40px;

margin-bottom:10px;

background-color: pink;

float: left;

}

#pic span{

position: absolute;

bottom: 10px;

left: 0;

}

#pic p,#pic span{

width: 400px;

height: 20px;

}

#pic p{

position: absolute;

top: 10px;

left: 0;

}

.active{

background-color: red;

}

</style>

<body>

<p>qwrwe</p>

<span>werwer</span>

<ul>

</ul>

</div>

window.onload=function(){

//存放旧li

var oldLi=null;

var num=0;

var oPic = document.getElementById('pic');

var oImg = oPic.getElementsByTagName('img')[0];

var oUL = oPic.getElementsByTagName('ul')[0];

var oSpan= oPic.getElementsByTagName('span')[0];

var oP = oPic.getElementsByTagName('p')[0];

var oLi= oUL.getElementsByTagName('li');

var arr=['image/1.jpg','image/2.jpg','image/3.jpg','image/4.jpg'];

var aText = ['图片1','图片2','图片3','图片4'];

for(var i=0;i<arr.length;i++){

//动态添加元素

oUL.innerHTML+='<li></li>';

}

// 旧li就等于当前的

oldLi=oLi[num];

// 初始化

oImg.src=arr[num];

oP.innerHTML=num+1+'/'+arr.length;

oSpan.innerHTML=aText[num];

oLi[num].className='active';

for(var i=0;i<arr.length;i++){

// 给元素自定义属性

oLi[i].index=i;

oLi[i].onclick=function(){

// 当元素被点击时图片文字信息都一起变化

oImg.src=arr[this.index];

oP.innerHTML=1+this.index+'/'+arr.length;

oSpan.innerHTML=aText[this.index];

// 清空上一个当前添加

oldLi.className='';

//将上一个给当前

oldLi=this;

this.className='active';

}

</script>

</body>

</html>

(7)js图片圆角扩展阅读：

注意事项

1、可以通过JS删除和添加hidden属性，改用style.display="none"和style.display="inline"来实现隐藏和显示。

2、button属性，主要的问题时button样式的问题，如何才能做一个好看的button，通过查找找到了设置button相关的值。

border:none; 设置按钮无边框

outline:none;消除按钮点击后出现的表示被点击的边框

background：url(...)按钮背景图片

text-shadow: 0 1px 1px rgba(0,0,0,.3);文字阴影

box-shadow: 0 5px 7px rgba(0,0,0,.2);按钮阴影

border-radius:15px;按钮边框圆角

⑧ 现在可以用border-radius做出向外的圆角，怎么用css或者js让div或者图片的边角向内倒圆角

你可以用一个圆。和背景色一样的块。定位到你要的位置。

⑨ 使用JQuery怎么实现鼠标移上去背景变圆角矩形

如果是支持CSS3的浏览器，定义border-radius属性，就是盒模型的边界圆角，值越大越圆。

用jquery做的话，就是定义一个带border-radius的class，然后选择相应的元素，在hover事件中使用addClass方法添加这个class。
但是，这是不好的做法，或者说是mb way。因为直接使用css的hover伪类就可以实现，完全不需要借助jquery或者说js
例如你的这几个div拥有一个class，title-div，那么只需要
.title-div:hover {
border-radius: 8px;

}
就可以实现鼠标一上去圆角。

不过要是需要兼容IE6/7/8这种不支持CSS3特性的浏览器，就得使用CSS3Pie之类的库，你可以搜索下，在官网上看看他介绍。

导航:首页 > 编程语言 > js图片圆角

js图片圆角

(7)js图片圆角扩展阅读：

与js图片圆角相关的资料

友情链接