css round corner div and transition

看stackoverflow上的圆角标签挺好看,自己动手试了下,用的属性是border-radius(即边框圆角半径,用px);加上transition effect,代码如下:

<!DOCTYPE html>

<html>

<head>

<style> 

div

{

width:58px;

border-style:solid;

border-width:2px;

border-radius:6px;  //div边框半径;

transition-property:all;  //变换的属性,可以为none、all,或者用逗号分开的多个property;

transition-duration: 0.5s;

}

div:hover //hover上去以后的style;

{

background:grey;

width:80px;

border-radius:12px;  //div边框圆角半径;

}

</style>

</head>

<body>



<div>sqlserver</div><br>

<div>oracle</div>



</body>

</html>

效果如下:

hover上去radius变大了。。。

 

你可能感兴趣的:(transition)