看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. 用电销机器人让电销企业迈入AI智能时代

    2019年是AI智能快速发展的一年,有非常多的企业已经用AI智能代替原有的传统员工做重复性高的工作,就拿销售行业来说,为了让电销员工提升工作效率,拥有更多的成单,大部分有电销岗位的公司都会把重复率较高 ...

  2. Node.js标准的回调函数

    Node.js标准的回调函数:第一个参数代表错误信息,第二个参数代表结果. function (err, data) 当正常读取时,err参数为null,data参数为读取到的String.当读取发生 ...

  3. CSS设置input默认样式

    HTML <ul class="box"> <li> <input type="checkbox" name="vehi ...

  4. request.getScheme()、 request.getServerName() 、 request.getServerPort() 、 request.getContextPath()

    <% String basePath = request.getScheme() + "://" + request.getServerName() + ":&qu ...

  5. Ubuntu Server下docker实战 02: docker进阶配置

    在上一篇文章里<Ubuntu Server下docker实战 01: 安装docker>,我们已经把docker安装起来了,并运行了一个hello-world 这一篇,我们继续讲进阶配置. ...

  6. jetty+httpClient使用

    背景: 看了https://www.cnblogs.com/donlianli/p/10954716.html这篇文章之后,突然发现自己的知识面太窄了,连这些几乎可以说基础的工具都没怎么用过,于是决定 ...

  7. Atcoder AGC031B Reversi (DP计数)

    简单的计数题.(总算做出一道AGC的B题了,然而这场比赛我忘记打了233333) 题目链接: https://atcoder.jp/contests/agc031/tasks/agc031_b 题意: ...

  8. 关于约束ENABLE NOVALIDATE的一个疑问

    http://www.dbunix.com/?p=188 关于约束ENABLE NOVALIDATE的一个疑问 CREATE TABLE test (id varchar2(12), name var ...

  9. 洛谷 P1903 BZOJ 2120 清橙 A1274【模板】分块/带修改莫队（数颜色）(周奕超)

    试题来源 2011中国国家集训队命题答辩 题目描述 墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会像你发布如下指令: 1. Q L R代表询问你从第L支画笔 ...

  10. android 细节之An internal error occurred during: &quot;Launching New_configuration&quot;.

    今天在导入公司的一个小demo时候发现了一个非常有意思的错误. An internal error occurred during: "Launching New_configuration ...