css round corner div and transition
看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的更多相关文章
- BestCoder Round #11 (Div. 2) 题解
HDOJ5054 Alice and Bob Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/O ...
- Codeforces Codeforces Round #484 (Div. 2) E. Billiard
Codeforces Codeforces Round #484 (Div. 2) E. Billiard 题目连接: http://codeforces.com/contest/982/proble ...
- BestCoder Round #11 (Div. 2) 前三题题解
题目链接: huangjing hdu5054 Alice and Bob 思路: 就是(x,y)在两个參考系中的表示演全然一样.那么仅仅可能在这个矩形的中点.. 题目: Alice and Bob ...
- 纯CSS制作加<div>制作动画版哆啦A梦
纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...
- 通过设置CSS属性让DIV水平居中
通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...
- 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 ...
- Codeforces Round #354 (Div. 2) ABCD
Codeforces Round #354 (Div. 2) Problems # Name A Nicholas and Permutation standard input/out ...
- Codeforces Round #368 (Div. 2)
直达–>Codeforces Round #368 (Div. 2) A Brain’s Photos 给你一个NxM的矩阵,一个字母代表一种颜色,如果有”C”,”M”,”Y”三种中任意一种就输 ...
- cf之路，1，Codeforces Round #345 (Div. 2)
cf之路,1,Codeforces Round #345 (Div. 2) ps:昨天第一次参加cf比赛,比赛之前为了熟悉下cf比赛题目的难度.所以做了round#345连试试水的深浅..... ...
随机推荐
- javaee字符缓冲输出流
package Zjshuchu; import java.io.BufferedWriter; import java.io.FileWriter; import java.io.IOExcepti ...
- BOS工具之BOS应用框架
大纲: 应用框架概述,bos应用框架总体,bos应用框架详细设计,代码结构以及常用应用,开发常用接口 框架(Framework)是整个或部分系统的可重用设计,表现为一组抽象组件及组件实例间交互的 ...
- html第四节课
css CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合 ...
- .net 单元测试
都说测试驱动开发,但是想写好单元测试其实不容易,不是因为测试用例难以构造,而是因为很多时候方法非常复杂 其中部分测试想要完成就十分费力,其中让人崩溃的地方主要如下: 实例私有函数 实例静态私有函数 十 ...
- string.Format 格式化日期格式
DateTime dt = DateTime.Now;//2010年10月4日 17点05分 string str = ""; //st ...
- (hdu step 7.2.2)GCD Again(欧拉函数的简单应用——求[1,n)中与n不互质的元素的个数)
题目: GCD Again Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- iOS_25_彩票设置的cell的数据源模型的封装
组模型的封装 SettingGroup // // SettingGroup.h // 25_彩票 // // Created by beyond on 14-8-28. // Copyright ( ...
- hdu1203--D - I NEED A OFFER!（转化01背包）
D - I NEED A OFFER! Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u ...
- ant整合junit自己主动化測试
一. 使用Junit进行測试 1. Java业务代码: public class HelloWorld { // 測试返回"world" public String hello() ...
- HDOJ1796 How many integers can you find(dfs+容斥)
How many integers can you find Time Limit: 12000/5000 MS (Java/Others) Memory Limit: 65536/32768 ...