看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. H3C交换机配置学习随笔

    1.交换机配置VLAN vlan 创建VLAN: <h3c>system-view [h3c]vlan 10 删除ID为10的vlan:undo vlan 10 注:任何型号的交换机,都支 ...

  2. Linux删除大于/小于固定大小的文件等

    删除目录下大小为0的文件 rm -f 删除当前目录下面所有 test 文件夹下面的文件 find ./ -name "test" -type d -exec rm -rf {} ; ...

  3. bos开发时,测试卡在登录界面解决

    在BOS工作空间工程路径下新建sp文件夹,如在E:\bosworkspace8.2\Project_0\lib 新建sp文件夹E:\bosworkspace8.2\Project_0\lib\sp.然 ...

  4. PAT 1072. Gas Station

    A gas station has to be built at such a location that the minimum distance between the station and a ...

  5. OO第四单元总结——查询UML类图 暨 OO课程总结

    一.本单元两次作业的架构设计总结 作业一.UML类图查询 1. 统计信息图 2. 复杂度分析 基本复杂度(Essential Complexity (ev(G)).模块设计复杂度(Module Des ...

  6. 【例题4-6 uva12412】A Typical Homework (a.k.a Shi Xiong Bang Bang Mang)

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 训练编程的题. 原题中没有除0的数据,所以别担心你的代码是因为除0错了. 多半跟我一样. 也是因为没有+eps 就是比如你要算tot ...

  7. 暑假集训D14总结

    %dalao 今天dalao继续来讲课~讲的是一个叫kd树的奇怪东西= = 然而啥都没听懂 考试 今天多校联考,日常炸= = 照例打了前两道题的暴力(T1随便hash一下就水过了啊喂),然后开始推T3 ...

  8. 24 Point game

    24 Point game 时间限制:3000 ms  |  内存限制:65535 KB 难度:5   描述 There is a game which is called 24 Point game ...

  9. emacs 搭建racket开发环境

    emacs 搭建racket开发环境 emacs下搭建开发racket的环境,笔者之前用过下面两种模式:geiser和racket-mode.相对而言,后一种方式要显得简单.本文主要介绍后一种方式环境 ...

  10. Android 源代码解析 之 setContentView

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/41894125,本文出自:[张鸿洋的博客] 大家在平时的开发中.对于setCont ...