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. 如何在shell脚本中判断文件或者文件夹是否存在?

    1:查找文件夹 如果文件夹存在,则打印一句存在,否则打印不存在 这里的话可以自由加一些指令. if [ test -d 文件夹名称 ] ; then echo "文件夹存在!" e ...

  2. LeetCode之旅(13)-Valid Anagram

    题目介绍: Given two strings s and t, write a function to determine if t is an anagram of s. For example, ...

  3. Java IO学习--(三)通道

    Java IO中的管道为运行在同一个JVM中的两个线程提供了通信的能力.所以管道也可以作为数据源以及目标媒介. 你不能利用管道与不同的JVM中的线程通信(不同的进程).在概念上,Java的管道不同于U ...

  4. Java IO学习--(二)文件

    在Java应用程序中,文件是一种常用的数据源或者存储数据的媒介.所以这一小节将会对Java中文件的使用做一个简短的概述.这篇文章不会对每一个技术细节都做出解释,而是会针对文件存取的方法提供给你一些必要 ...

  5. Ubuntu18.04教程

    pre.ctl { font-family: "Liberation Mono", monospace } h1 { margin-bottom: 0.21cm } h1.west ...

  6. MvcSiteMapProvider 自定义模板

    MvcSiteMapProvider  介绍文字就省了,直接访问官方站点吧. 官方站点:https://github.com/maartenba/MvcSiteMapProvider 默认的模板文件 ...

  7. java面试笔试题大汇总

    第一,谈谈final, finally, finalize的区别.  最常被问到.   第二,Anonymous Inner Class (匿名内部类) 是否可以extends(继承)其它类,是否可以 ...

  8. eclipse乱码

    eclipse乱码:Windows >general >Workspace UTF-8Windows >general >Editors >Text Editors &g ...

  9. SAE提供服务分析

    这个分析列表主要关注两个问题,服务能做什么,移植实现难度. AppConfig: 这个东西主要面向SAE本身的一些配置选项,移植时放弃这个东西,所以就不谈难度了Counter :这个东西提供某个操作的 ...

  10. C语言编对双精度数保留一位小数

    /*第一题*/ #include<stdio.h> //输入1.2345 输出1.2000 //输入1.2547 输出1.3000 main(){ ; printf("请输入:\ ...