您的位置：首页 > Web前端 > CSS

css3--border属性

2015-09-16 15:34 585 查看 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>01</title>
</head>
<style>
/*1、基本*/
.one{
height: 200px;
width: 200px;
border-style: solid ;
border-width:2px ;
border-color: red;
border-radius: 0;
box-shadow: 5px 5px 20px #000000;
border-image: url(../img/border.png);
border-image-slice: 26;
border-image-width: 26;
/*
border-image-outset: 20;
*/
border-image-repeat: stretch round;
}

/*2、兼容ie8*/
.two{
height: 200px;
width: 200px;
border-style: solid ;
border-width:2px ;
border-color: red;
border-radius: 50%;
box-shadow: 5px 5px 20px #000000;
/*ie8*/
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=2px, OffY=2px, Color='#000000')"; /* IE8 */
}

/*3、js控制*/
.three{
width: 200px;
height: 200px;
border: 1px solid red;
border-radius: 0px;
}

</style>
<script>

window.onload=function(){
try{
/*
//这个方法实现起来，速度比较慢。
var div=document.getElementsByTagName('div')[2];//居然用getElementsByClassName()会失败，真奇葩！！！
console.log(div.offsetWidth);
var radius=0;
var t;
div.onmouseover=function () {
clearInterval(t);
console.log("鼠标在其上之时，触发事件！！！");
t=setInterval(function(){
if(parseInt(div.style.borderRadius)>=div.offsetWidth/2){
clearInterval(t);
}
else{
radius++;
//console.log(radius);
div.style.borderRadius=radius+'px';
}
},60);

};

div.onmouseout=function () {
clearInterval(t);
console.log("鼠标在离开其之时，触发事件！！！");

t=setInterval(function(){
if(parseInt(div.style.borderRadius)<=0){
clearInterval(t);
}
else{
radius--;
//console.log('离开'+radius);
div.style.borderRadius=radius+'px';
}

},60);

};

}catch(e){
console.log(e);
}
*/

//优化代码
var div=document.getElementsByTagName('div')[2];/*居然用getElementsByClassName()会失败，真奇葩！！！*/
var t;
div.onmouseover=function () {
clearInterval(t);
console.log("鼠标在其上之时，触发事件！！！");
console.log(parseInt(div.style.borderRadius));
/*
*注：1、div.style.borderRadius如果是获取使用css样式的话，如0px，获取到的数据为NaN。
*    2、<div class="three"  style="border-radius:0;"></div>，可正确获取。
* */
t=setInterval(function(){
if(parseInt(div.style.borderRadius)>=div.offsetWidth/2){
clearInterval(t);
}
else{
var radius=(div.offsetWidth/2-parseInt(div.style.borderRadius))*0.2;
//console.log(div.offsetWidth/2-parseInt(div.style.borderRadius));
div.style.borderRadius=parseInt(div.style.borderRadius)+radius+"px";
}
},60);

};

div.onmouseout=function () {
clearInterval(t);
console.log("鼠标在离开其之时，触发事件！！！");
console.log(div.style.borderRadius);
t=setInterval(function(){
if(parseInt(div.style.borderRadius)<=0){
clearInterval(t);
}
else{
var radius=(0-parseInt(div.style.borderRadius))*0.2;
div.style.borderRadius=parseInt(div.style.borderRadius)+radius+"px";
}

},60);

};

}catch(e){
console.log(e);
}
}

</script>
<body>

<div class="one"></div>
<div class="two"></div>
<div class="three"  style="border-radius:0;"></div>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航