看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. Java JPA通过hql语句查询数据

    import javax.persistence.PersistenceContext; import javax.persistence.Query; public class StudentSer ...

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

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

  3. Pytorch实战（3）----分类

    一.分类任务: 将以下两类分开. 创建数据代码: # make fake data n_data = torch.ones(100, 2) x0 = torch.normal(2*n_data, 1) ...

  4. opencv(一）下载安装

    1.visual studio 工具---Nugget包管理器---管理解决方案的Nugget程序包 搜索opencv,点击安装 下载地址: 1.http://opencv.org/ 2.https: ...

  5. vue 手机键盘把底部按钮顶上去

    背景:在写提交订单页面时候,底部按钮当我点击输入留言信息的时候,底部提交订单按钮被输入法软键盘顶上去遮挡住了. h5 ios输入框与键盘 兼容性优化 实现原理:当页面高度发生变化的时候改变底部butt ...

  6. python爬虫06 | 你的第一个爬虫，爬取当当网 Top 500 本五星好评书籍

    来啦,老弟 我们已经知道怎么使用 Requests 进行各种请求骚操作 也知道了对服务器返回的数据如何使用 正则表达式 来过滤我们想要的内容 ... 那么接下来 我们就使用 requests 和 re ...

  7. CSS行高line-height的学习

    一.定义和用法 line-height 属性设置行间的距离(行高). 可能的值 normal默认.设置合理的行间距. number设置数字,此数字会与当前的字体尺寸相乘来设置行间距. length设置 ...

  8. boost中的有用工具assign和uuid

    assign assign重载'+'=和','实现连续赋值 assign不仅支持所有8个STL标准容器(vector.string.deque.list.set.multiset.map.multim ...

  9. [React] Forward a DOM reference to another Component using forwardRef in React 16.3

    The function forwardRef allows us to extract a ref and pass it to its descendants. This is a powerfu ...

  10. 阿里巴巴集团2014年校园招聘系统project师北京笔试题

    第一部分 单选题(前10题,每题2分;后10题,每题3分;共50分.选对得满分,选错倒扣一分,不选得0分.) 1.字符串"alibaba"有 个不同的排列. A. 5040 B. ...