CSS3- 圆角效果 border-radius
来源:互联网 发布:哥特鸟嘴面具 知乎 编辑:程序博客网 时间:2024/06/06 08:36
border-radius 可以为元素的添加圆角边框
使用方法: 首先为页面添加一个块状div
<div class="radius"></div>
.radius {width: 100px;height: 100px;background: #9da;}
border-radius 属性有4个复合属性: border-radius: 5px 5px 5px 5px;
这四个复合属性从左到右排序分别对应左上、右上、右下、左下.
当四个复合属性都相同的话可以简写为: border-radius: 5px;
当左上与右下, 右上与左下(它们之间的关系就是交叉对角关系)分别都相同的时候: border-radius: 2px 4px 2px 4px;
那么上式可简写为: border-radius: 2px 4px;
除了可以使用px单位, 也可以使用em或百分比.
.radius {width: 100px;height: 100px;background: #9da;border-radius: 5px 5px 5px 5px;/* 简写: border-radius: 5px; */}
左上:
border-radius: 5px 0 0 0;
实心圆:
border-radius: 50px;
.radius {width: 50px;height: 100px;background: #9da;border-radius: 50px 0 0 50px;}
上半圆:
.radius {width: 100px;height: 50px;background: #9da;border-radius: 50px 50px 0 0;}
阅读全文
0 0
- 【CSS3】---圆角效果 border-radius
- 【CSS3】圆角效果 border-radius
- CSS3边框 圆角效果 border-radius
- CSS3边框 圆角效果 border-radius
- CSS3 border-radius随机圆角效果
- CSS3- 圆角效果 border-radius
- CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)
- 初识css3 的圆角效果border-radius
- border-radius边框圆角效果(CSS3)
- CSS3之边框圆角:border-radius
- CSS3的圆角Border-radius
- CSS3的圆角Border-radius
- CSS3之圆角border-radius
- border-radius 圆角边框(CSS3.0)
- css3.0:border-radius 圆角边框
- CSS3 圆角属性 border-radius
- CSS3圆角详解:border-radius
- css3:border-radius圆角边框详解
- 005
- SNMP服务WIN10安装及测试
- 整数拆分种类(五边形数定理)
- 神经网络及反向传播(bp)算法详解
- CSU 1960:单源最大权路径 (DFS)
- CSS3- 圆角效果 border-radius
- C——常用字符串函数、内存操作函数总结
- bash变量位置参数变量预定义变量环境变量详解
- [NOIP2016][单调队列]蚯蚓
- Ngnix均衡负载入门案例
- Okabe and Banana Trees CodeForces
- bind解决事件绑定的兼容性问题。
- 重构 -- 改善既有代码的设计
- 今日头条移动 APP 广告激活数据API对接实践