看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. 【转】虚拟化（三）：vsphere套件的安装注意及使用

    vsphere套件里面主要的组件有esxi.vcenter server .vsphere client和vsphere web client. vcenter做为vsphere套件的核心管理成员之一 ...

  2. SSM项目中表单分页操作（PageHepler使用）

    Maven pom.xml添加依赖 <dependency> <groupId>com.github.pagehelper</groupId> <artifa ...

  3. vue实现单页应用demo

    vue + webpack +ES6/7 + axiso + vuex + vue-router构建项目前端,node + express + mongodb 开发后台 项目demo地址 https: ...

  4. vue-路由使用

    路由安装 终端下载路由插件 npm install vue-router --save-dev 配置 在main.js中引入插件 //Router 为自定义名 vue-router 为插件的名字 im ...

  5. PAT_A1136#A Delayed Palindrome

    Source: PAT_A1136 A Delayed Palindrome (20 分) Description: Consider a positive integer N written in ...

  6. 15.3 Task 语法和语义

    15.3.1 声明异步方法和返回类型 async static void GetStringAsync() { using (var client = new HttpClient()) { Task ...

  7. Call to undefined function openssl_decrypt()

    laravel报错: Call to undefined function openssl_decrypt() 需要打开php.ini中的扩展: extension=php_openssl.dll

  8. Java基本类型转换

    1.自动类型转换 java所有的数值型变量都可以相互转换,如果系统支持把某种基本类型的值直接付赋给另一个基本类型的变量,则这种方式被称为自动类型转换. 当把一个表数范围小的数值或变量直接赋给另一个表数 ...

  9. Java 动态实现word导出功能

    1.word模板:xx.ftl生成,ftl文件就是word的源代码,类似html一样是拥有标签和样式的代码. 把需要导出的doc文件模板用office版本的word工具打开. 把doc文件另存为xx. ...

  10. 【2000*】【Codeforces Round #518 (Div. 1) [Thanks, Mail.Ru!] B】Multihedgehog

    [链接] 我是链接,点我呀:) [题意] [题解] 找到度数为1的点. 他们显然是叶子节点. 然后每个叶子节点. 往上进行bfs. 累计他们的父亲节点的儿子的个数. 如果都满足要求那么就继续往上走. ...