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. JavaScript继承详解

    面向对象与基于对象 在传统面向对象的语言中,有两个非常重要的概念 - 类和实例. 类定义了一类事物公共的行为和方法:而实例则是类的一个具体实现. 我们还知道,面向对象编程有三个重要的概念 - 封装.继 ...

  2. Storm 提交多个流例程

    1.拓扑(Topology): builder.setBolt(TRANSFORM_BOLT, new TransformationBolt(), 1).shuffleGrouping(MY_SPOU ...

  3. Spring定时任务(一):SpringTask使用

    背景:在日常开发中,经常会用到任务调度这类程序.实现方法常用的有:A. 通过java.util.Timer.TimerTask实现. B.通过Spring自带的SpringTask. C. 通过Spr ...

  4. 接口文档神器之apidoc

    //@desn:apidoc linux环境  windows环境使用 //@desn:码字不宜,转载请注明出处 //@author:张慧源  <turing_zhy@163.com> / ...

  5. docker的安装和技巧

    工作了有一段时间,开发环境中需要docker环境,但是docker一直不算很熟,之前一直是利用yum安装,但是yum安装真的很费劲,所以总结了一些经验给大家: 1,利用yum直接安装 官网是直接给了y ...

  6. Linux 文件目录解释

    /bin:bin是binary(二进制)的缩写.这个目录是对UNIX系统习惯的沿袭,存放着使用者最经常使用的命令.例如:cp,ls,cat. /boot:这里存放的是启动LINUX时使用的一些核心文件 ...

  7. orderBy新写法

    通常,我们处理排序规则的处理方法是在sql 语句中order by create_time desc, 但是这时我们需要从控制器中一步步找到该方法,操作多. 我们试着将业务逻辑拆分到控制器 中, 把排 ...

  8. 最全的 Swift 4 新特性解析

    转自: http://www.jianshu.com/p/f35514ae9c1a WWDC 2017 带来了很多惊喜.Swift 4 也伴随着 Xcode 9 测试版来到了我们的面前,很多强大的新特 ...

  9. CPA、CPS、CPM、CPT、CPC 是什么

    http://www.a-edm.com/cpa.html 网络营销之所以越来越受到重视一个主要的原因就是因为“精准”.相比较传统媒体的陈旧广告形式,网络营销能为广告主带来更为确切的效果与回报,更有传 ...

  10. 基于opencv下对视频的灰度变换,高斯滤波,canny边缘检测处理,同窗体显示并保存

    如题:使用opencv打开摄像头或视频文件,实时显示原始视频,将视频每一帧依次做灰度转换.高斯滤波.canny边缘检测处理(原始视频和这3个中间步骤处理结果分别在一个窗口显示),最后将边缘检测结果保存 ...