border-radius:3px;  参数的单位可以使绝对的像素px,也可以用相对单位%;

          参数顺序是左上角,右上角,右下角,左下角.

圆角:

div{width: 100px;height: 100px;border: 1px solid #6c6;border-radius: 50%;}

不同设置:

div{
width: 100px;
height: 100px;
border: 1px solid #6c6;
border-radius:20px 0 0 0;
border-radius:20px 20px 0 0; /**/
border-radius:20px 20px 20px 0;/**/
border-radius:0 20px 0 20px; /**/
}

过渡效果:

.hex{
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow:0 0 0 1px #ccc inset;
transition:box-shadow 0.5s linear;
}
.hex:hover{
box-shadow: 0 0 0 16px #039 inset;
}

border-radius 圆角的更多相关文章

  1. WPF 采用Border创建圆角

    通过设置可以创建圆角border的CornerRadius属性其边框呈现圆角样式 代码: <Border Height="50" Background="Red&q ...

  2. 使用ToggleButton和StackPanel+Border实现圆角开关按钮动画效果

    <ToggleButton Height=" HorizontalAlignment="Left" Margin="138,122,0,0" N ...

  3. 利用CSS3实现圆角的outline效果的教程

    一.首先,outline是个很牛的东西1. border近亲outline和border是近亲,为什么这么讲呢?首先,都是给元素外面套框框的:其次,支持的属性值几乎都是一样的,例如,outline-s ...

  4. iOS 高效添加圆角效果实战讲解

    圆角(RounderCorner)是一种很常见的视图效果,相比于直角,它更加柔和优美,易于接受.但很多人并不清楚如何设置圆角的正确方式和原理.设置圆角会带来一定的性能损耗,如何提高性能是另一个需要重点 ...

  5. 重温CSS:Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

  6. CSS如何实现圆角的outline效果?

    一.首先,outline是个很牛逼的东西 温故而知鑫,10年的时候写过一篇可用性方面的文章:“页面可用性之outline轮廓外框的一些研究”,还算挺有用的:3年之后,也就是13年,介绍了个没什么使用价 ...

  7. iOS开发-添加圆角效果高效实现

    圆角(RounderCorner)是一种很常见的视图效果,相比于直角,它更加柔和优美,易于接受.但很多人并不清楚如何设置圆角的正确方式和原理.设置圆角会带来一定的性能损耗,如何提高性能是另一个需要重点 ...

  8. CSS 笔记——阴影、圆角、旋转、光标

    7. 阴影.圆角.旋转.光标 (1)box-shadow 阴影 基本语法 text-shadow: h-shadow v-shadow blur color; box-shadow: h-shadow ...

  9. CSS3边框与圆角

    1. CSS3 圆角 border-radius 属性 一个最多可指定四个border -*- radius属性的复合属性,这个属性允许你为元素添加圆角边框!语法:border-radius: 1-4 ...

  10. css 边框和圆角

    CSS3圆角 border-radius属性 一个最多指定四个border -*- radius复合属性,这个属性允许你为元素添加圆角边框 语法 border-radius:1-4 length|% ...

随机推荐

  1. ruby抓取web页面

    一种方法是Net::HTTP.new方法,返回resp码和实际的data: require 'net/http' h = Net::HTTP.new("www.baidu.com" ...

  2. angularjs系列之轻松使用$q进行异步编程

    第一部分关于js中的异步编程 异步编程简单的说就是你写了一段代码,但他不会按照你书写代码的顺序立即执行,而是等到程序中发生了某个事件(如用户点击了某个按钮,某个ajax请求得到了响应)才去执行这段代码 ...

  3. 乐学习知选择--我的J2EE技术历程

    转眼换工作已经两个多月了,转眼今年已经到9月份了,转眼女朋友也来到了自己身边.有太多的转眼,如今在这个经理不在的早晨,可以肆意的点点这里看看那里,想想自己,有点吉利思的感觉. 这两个多月,知道了什么叫 ...

  4. 转载 jQueryEasyUI Messager基本使用

    http://www.cnblogs.com/libingql/archive/2011/07/17/2109020.html 一.jQueryEasyUI下载地址 http://www.jeasyu ...

  5. JAVA 平台

    由Java虚拟机和Java核心类所构成.它为纯Java程序提供了统一的编程接口,而不管下层操作系统是什么. 目录 1Java术语 2移动平台 3桌面应用平台 4企业级平台 5JRE的成分     1J ...

  6. 基于 HTML5 Canvas 的工控机柜 U 位动态管理

    前言 U 是一种表示服务器外部尺寸的单位,是 unit 的缩略语,详细的尺寸由作为业界团体的美国电子工业协会(EIA)所决定.之所以要规定服务器的尺寸,是为了使服务器保持适当的尺寸以便放在铁质或铝质的 ...

  7. Activex、OLE、COM、OCX、DLL之间有什么区别?

    来源:http://www.blogjava.net/Jack2007/archive/2008/04/27/196392.html         熟悉面向对象编程和网络编程的人一定对ActiveX ...

  8. 基于libevent的tcp拆包分包库

    TCP/IP协议虽然方便,但是由于是基于流的传输(UDP是基于数据报的传输),无论什么项目,总少不了解决拆包分包问题. 以前的项目总是每个程序员自己写一套拆包分包逻辑,实现的方法与稳定性都不太一致.终 ...

  9. 干货!从Tomcat执行流程了解jsp是如何被解析的,错误提示是哪里生成的。

    一.关于Tomcat组成          先上张图: Tomcat组成: 1. Server:代表整个 servlet 容器,如Tomcat,JBoss之类的. 2. Service:它由一个或者多 ...

  10. linux定时清理数据库过期记录

    cron服务是Linux的内置服务,但它不会开机自动启动.可以用以下命令启动和停止服务: /sbin/service crond start//没打开的话首先要打开. /sbin/service cr ...