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

css round corner div and transition的更多相关文章

  1. BestCoder Round #11 (Div. 2) 题解

    HDOJ5054 Alice and Bob Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/O ...

  2. Codeforces Codeforces Round #484 (Div. 2) E. Billiard

    Codeforces Codeforces Round #484 (Div. 2) E. Billiard 题目连接: http://codeforces.com/contest/982/proble ...

  3. BestCoder Round #11 (Div. 2) 前三题题解

    题目链接: huangjing hdu5054 Alice and Bob 思路: 就是(x,y)在两个參考系中的表示演全然一样.那么仅仅可能在这个矩形的中点.. 题目: Alice and Bob ...

  4. 纯CSS制作加<div>制作动画版哆啦A梦

    纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...

  5. 通过设置CSS属性让DIV水平居中

    通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...

  6. Codeforces Round #366 (Div. 2) ABC

    Codeforces Round #366 (Div. 2) A I hate that I love that I hate it水题 #I hate that I love that I hate ...

  7. Codeforces Round #354 (Div. 2) ABCD

    Codeforces Round #354 (Div. 2) Problems     # Name     A Nicholas and Permutation standard input/out ...

  8. Codeforces Round #368 (Div. 2)

    直达–>Codeforces Round #368 (Div. 2) A Brain’s Photos 给你一个NxM的矩阵,一个字母代表一种颜色,如果有”C”,”M”,”Y”三种中任意一种就输 ...

  9. cf之路，1，Codeforces Round #345 (Div. 2)

     cf之路,1,Codeforces Round #345 (Div. 2) ps:昨天第一次参加cf比赛,比赛之前为了熟悉下cf比赛题目的难度.所以做了round#345连试试水的深浅.....   ...

随机推荐

  1. python tips:matplotlib保存多张图片时，图片会相互叠加

    问题: 使用matplotlib的pyplot.savefig保存图片时,前面的图会不断叠加到后面的图中. 原因: savefig方法保存图片并不会重置画布,所以导致图片的相互叠加. 解决方法: 保存 ...

  2. MATLAB图形界面设计（下）

    文章参考Blue Mountain https://www.cnblogs.com/BlueMountain-HaggenDazs/p/4307777.html 一.菜单设计 1.建立菜单项 (1)建 ...

  3. 20.基于es内部_version进行乐观锁并发控制

  4. ASP的Global.asa使用说明

    /*-------------------ASP文档参考集-----------------------*/ *-->作者:草履虫 *-->时间:2007-4.28---2007-4.30 ...

  5. magento 的一些Sql查询

    1,模拟使用getName()获取产品名称的sql SELECT `value` AS product_name FROM yo_catalog_product_entity_varchar WHER ...

  6. hdoj 1257最少拦截系统

     /*最少拦截系统 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tota ...

  7. LINQ体验(8)——LINQ to SQL语句之Union All/Union/Intersect和Top/Bottom和Paging和SqlMethods

    我们继续解说LINQ to SQL语句,这篇我们来讨论Union All/Union/Intersect操作和Top/Bottom操作和Paging操作和SqlMethods操作 . Union Al ...

  8. C# - Generics

    Generics were added to version 2.0 of the C# language and the common language runtime (CLR). Generic ...

  9. poj2299--归并排序求逆序数

    /** \brief poj2299  *  * \param date 2014/8/5  * \param state AC  * \return memory 4640K time 3250ms ...

  10. Android之旅十六 android中各种资源的使用

    android中各种资源的使用: 在android开发中,各种资源的合理使用应该在各自的xml中进行定义,以便反复使用; 字符串资源:strings.xml,xml中引用:@string/XXX,ja ...