css3--border属性

最新推荐文章于 2022-06-27 17:19:13 发布

您宁

最新推荐文章于 2022-06-27 17:19:13 发布

阅读量494

点赞数

分类专栏： javascript css3

本文链接：https://blog.csdn.net/qw765811529/article/details/48494413

版权

javascript 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

css3

6 篇文章 0 订阅

订阅专栏

<!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.οnlοad=function(){
			try{
				/*
				//这个方法实现起来，速度比较慢。
				var div=document.getElementsByTagName('div')[2];//居然用getElementsByClassName()会失败，真奇葩！！！
				console.log(div.offsetWidth);
				var radius=0;
				var t;		
				div.οnmοuseοver=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.οnmοuseοut=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.οnmοuseοver=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.οnmοuseοut=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>