border-radius 圆角
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 圆角的更多相关文章
- WPF 采用Border创建圆角
通过设置可以创建圆角border的CornerRadius属性其边框呈现圆角样式 代码: <Border Height="50" Background="Red&q ...
- 使用ToggleButton和StackPanel+Border实现圆角开关按钮动画效果
<ToggleButton Height=" HorizontalAlignment="Left" Margin="138,122,0,0" N ...
- 利用CSS3实现圆角的outline效果的教程
一.首先,outline是个很牛的东西1. border近亲outline和border是近亲,为什么这么讲呢?首先,都是给元素外面套框框的:其次,支持的属性值几乎都是一样的,例如,outline-s ...
- iOS 高效添加圆角效果实战讲解
圆角(RounderCorner)是一种很常见的视图效果,相比于直角,它更加柔和优美,易于接受.但很多人并不清楚如何设置圆角的正确方式和原理.设置圆角会带来一定的性能损耗,如何提高性能是另一个需要重点 ...
- 重温CSS:Border属性
边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...
- CSS如何实现圆角的outline效果?
一.首先,outline是个很牛逼的东西 温故而知鑫,10年的时候写过一篇可用性方面的文章:“页面可用性之outline轮廓外框的一些研究”,还算挺有用的:3年之后,也就是13年,介绍了个没什么使用价 ...
- iOS开发-添加圆角效果高效实现
圆角(RounderCorner)是一种很常见的视图效果,相比于直角,它更加柔和优美,易于接受.但很多人并不清楚如何设置圆角的正确方式和原理.设置圆角会带来一定的性能损耗,如何提高性能是另一个需要重点 ...
- CSS 笔记——阴影、圆角、旋转、光标
7. 阴影.圆角.旋转.光标 (1)box-shadow 阴影 基本语法 text-shadow: h-shadow v-shadow blur color; box-shadow: h-shadow ...
- CSS3边框与圆角
1. CSS3 圆角 border-radius 属性 一个最多可指定四个border -*- radius属性的复合属性,这个属性允许你为元素添加圆角边框!语法:border-radius: 1-4 ...
- css 边框和圆角
CSS3圆角 border-radius属性 一个最多指定四个border -*- radius复合属性,这个属性允许你为元素添加圆角边框 语法 border-radius:1-4 length|% ...
随机推荐
- 【Android 应用开发】Android游戏音效实现
1. 游戏音效SoundPool 游戏中会根据不同的动作 , 产生各种音效 , 这些音效的特点是短暂(叫声,爆炸声可能持续不到一秒) , 重复(一个文件不断重复播放) , 并且同时播放(比如打怪时怪的 ...
- 关于GPL329A中获取摄像头sensor id的问题
首先我拿到了sensor_id应用程序的源码,我要在上面添加获取ov2685 的 sensor id的代码. 利用find . -name get_sensor_id找到该代码编译之后生成的a.ou ...
- 详解linux进程间通信-消息队列
前言:前面讨论了信号.管道的进程间通信方式,接下来将讨论消息队列. 一.系统V IPC 三种系统V IPC:消息队列.信号量以及共享内存(共享存储器)之间有很多相似之处. 每个内核中的 I P C结构 ...
- pyqt5 动画在QThread线程中无法运行问题
自己做了一个tcp工具,在学习动画的时候踩了坑,需求是根据上线变绿色,离线变灰色,如果连接断开了,则变为灰色 问题现象: 可以看到点击"连接","离线"的时候动 ...
- app ionic1 微信 微博 分享功能的实现
微信分享 1.登录微信开放平台注册账户 2.创建一个移动应用 (app) 审核过后会有一个appid 之后安装插件的时候会用到 3.在这个应用上面填写 包名 和 签名 就可以了 包名和签名的 ...
- 去除元素浮动(:after)
>>HTML <div class="zg_city"> <div class="zg_left"></div> ...
- IT轮子系列(一)——DropDownList 的绑定(二)
补记: 今天在阅读公司项目代码的时候,发现MVC中的dropdownlist已经封装了数据绑定方式.相对于第一篇文章,这样的方式更简便.简洁.现记录如下: 首先,创建我们的数据模型 如下图: 模型代码 ...
- 排序算法入门之希尔排序(java实现)
希尔排序是对插入排序的改进.插入排序是前面元素已经有序了,移动元素是一个一个一次往后移动,当插入的元素比前面排好序的所有元素都小时,则需要将前面所有元素都往后移动.希尔排序有了自己的增量,可以理解为插 ...
- 畅通工程-HZNU寒假集训
畅通工程 某省调查城镇交通状况,得到现有城镇道路统计表,表中列出了每条道路直接连通的城镇.省政府"畅通工程"的目标是使全省任何两个城镇间都可以实现交通(但不一定有直接的道路相连,只 ...
- win10右键添加在此处打开powershell
如图: 你想要的效果可能就是这个吧?但是找了好久没有找到方法?爸比告诉你,不需要修改任何东西, 解锁新姿势: 在文件夹空白处,按住shift同时鼠标右击,发现没??发现没!!!!