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. mac os 中如何修改顶栏图标的顺序

    很简单哦! 按住 cmd键同时鼠标选中那个图标,直接拖到你想要的位置即可.

  2. python socketserver框架解析

    socketserver框架是一个基本的socket服务器端框架, 使用了threading来处理多个客户端的连接, 使用seletor模块来处理高并发访问, 是值得一看的python 标准库的源码之 ...

  3. Emmet之html语法

    一.简写语法 Emmet 用和 CSS 选择器相似的语法来描述元素的嵌套层级关系和属性,实现 HTML/XML/CSS 等代码的智能自动补全. 其通过文件名后缀识别文件类型,从而使用对应的自动补全语法 ...

  4. spiral matrix 螺旋矩阵

    Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spiral or ...

  5. x&(x-1)

    x&(x-1)可以用来求出x是否为2幂次方数:当&的结果为0时,x原值是2幂次方数,否则就不是2幂次方数: x=x&(x-1)即把x从低位开始的第一个1改成0.如1000,把1 ...

  6. java泛型应用实例 - 自定义泛型类,方法

    近 短时间需要使用泛型,就研究了下,发现网上的问关于泛型的文章都是讲原理的, 很少有提到那里用泛型比较合适, 本文就泛型类和泛型方法的使用给出两 个典型应用场景. 例如一个toString的泛型方法, ...

  7. JDK内置工具之一——JMap(java memory map)

    1.介绍 打印出某个java进程(使用pid)内存内的,所有‘对象’的情况(如:产生那些对象,及其数量). 可以输出所有内存中对象的工具,甚至可以将VM 中的heap,以二进制输出成文本.使用方法 j ...

  8. 集群中几种session同步解决方案的比较[转]

    集群中session安全和同步是个最大的问题,下面是我收集到的几种session同步的方案,希望能通过分析其各自的优劣找出其适应的场景. 1. 客户端cookie加密 这是我以前采用的方式,简单,高效 ...

  9. 二分查找算法的C++和PHP实现

    C++实现方式: #include<iostream> #include<stdlib.h>#include<algorithm> using namespace ...

  10. AJAX的get和post请求原生编写方法

    var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(){ if(xhr.readyState===4){ if(xhr.stat ...