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|% ...
随机推荐
- Activity之间传递大数据问题
Android开发人员都知道,Intent适用于在不同的Activity之间传递数据,包括参数.字符串.以及序列化的对象等.但是笔者所做的项目用到了使用Intent 传递Bitmap图片对象,图片的数 ...
- MfgTool (i.MX53)使用
1 Introduction The MfgTool is a manufacturing tool from Freescale that runs under Windows. It is des ...
- Dll的编写 在unity中加载
1. 在VS中新建Dll项目 2.在头文件中对函数进行声明 extern "C" int _declspec(dllexport) testunity(); 3.在源文件中写函数体 ...
- 赋给个人账户sudo的全部root执行权限
sudo visudo 输入root账户密码后,会自动打开sudoers文件编辑 在root ALL=(ALL) ALL此行下增加一行 user ALL=(ALL) NOPASSW ...
- Microsoft源代码注释语言(SAL)提供设置批注
Microsoft源代码注释语言(SAL)提供设置批注可以使用描述的功能如何使用其参数,它对其假设并确保它使其在完成. 批注可标头文件 <sal.h>定义. Visual Studio C ...
- Android Gradle 自定义Task 详解
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/76408024 本文出自[赵彦军的博客] 一:Gradle 是什么 Gradle是一 ...
- Ocelot中文文档-Qos服务质量
目前Ocelot支持一种QoS功能. 如果您希望在请求向下游服务时使用断路,则可以在ReRoute中进行设置. 这个功能使用了一个名为Polly的.NET库,这个库很棒,在这里可以找到它. 添加如下配 ...
- Hbase出现ERROR: Can't get master address from ZooKeeper; znode data == null正确找到解决思路
第一次配置时出现这样的错误,也很懵的,到处上网找博客看资料,都试了个遍,但是问题还是存在,以下这些博客写的或许是解决一类问题的方式. https://blog.csdn.net/whbo111/art ...
- javascript DOM编程艺术(检测与性能优化)
一.对象检测(是否支持js方法):只有支持了该方法才可调用 if(!getElementById || getElementsByTagName){ return false; } 二.性能考滤 1. ...
- istio收集Metrics和日志信息
1.切换到istio根目录 cd /data/istio/istio-0.7.1 2.安装prometheus kubectl apply -f install/kubernetes/addons/p ...