看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变大了。。。