CSS3圆角边框
来源:互联网 发布:五笔拼音输入法mac版 编辑:程序博客网 时间:2024/04/30 07:09
本文介绍border-radius的使用、应用、特殊圆形的制作等!
border-radius属性的使用方法:
1.水平和垂直半径一样:
- border-radius只设置一个值:四个圆角相同
- border-radius设置两个值:斜对角相同
- border-radius设置三个值:top-right和bottom-left相同
- border-radius设置四个值:各自取值
2.单独设置水平和垂直半径:用”/”来区别:水平半径/垂直半径
.border-radius{ width:350px;height:100px; border:10px solid orange; border-radius:60px 40px 30px 20px/30px 20px 10px 5px;}
效果图:
注意: 分开设置元素各个顶角的圆角的水平和垂直半径圆角效果时,是不需要’/’的,不需要’/’的,不需要’/’的,加上反而是错误的!!!
3.制作单个圆角边框
border-radius:30px 0 0 0;
4.特殊应用:
- border-radius:内半径=外半径-边框宽度!内半径为两者的差值,差值越大,圆角幅度也越大,反之圆角幅度越小。当border边宽越大时候,内圆角接近于直角,不具有圆角效果。
- 不同宽度的相邻边,内角会从宽的边平滑过渡到窄的一边,其中一条边可以为0,相邻转角由大向小转。
//内半径=外半径-边宽,边宽过大则内圆角为直角.border-radius2{ width:350px;height:100px; border:30px solid orange; border-radius:25px;}//不同宽边的平滑过渡效果.border-radius3{ width:350px;height:100px; border:3px solid red; border-width: 20px 5px 30px 60px; border-radius:100px;}
效果图:
特殊圆形的制作:
1.圆形:
制作技巧:元素的宽度和高度相同,圆角半径为宽或高的一半或直接设置50%!
.round{ width:100px;height:100px; background:red; border-radius:50%;}
2.半圆:
制作技巧:元素的宽度和高度相配合(多为2倍关系),圆角半径为短边的值,圆角半径设置位置不同。分上、右、下、左半圆
//上半圆.halfCircle{ width:200px;height:100px; background-color: blue; border-radius:100px 100px 0 0 ;}//右半圆.halfCircle2{ width:100px;height:200px; background-color: blue; border-radius:0 100px 100px 0 ;}//...
3.扇形:
制作技巧:其实就是制作四分之一圆,遵循”三同,一不同“原则,宽度,高度,圆角半径相同,圆角位置不同。分为左上、右上、右下、左下。
.quarterCircle{ width:100px;height: 100px; background: orange; border-radius: 100px 0 0 0;/*圆角位置不同*/}
4.椭圆:
制作技巧:设置水平和垂直半径,例如水平方向的椭圆:宽度=高度x2,水平半径=宽度,垂直半径=高度!垂直方向的椭圆则相反。
.hor{ width:200px;height:100px; background: green; border-radius: 200px/100px;}
可以配合元素的其他属性实现不同的图形效果,适应项目需求。border-radius浏览器兼容性较好,IE8以下不支持,but,who care about it?…
0 0
- CSS3圆角边框
- css3.0 边框圆角
- css3设置圆角边框
- CSS3边框圆角实现
- CSS3边框和圆角
- CSS3边框与圆角
- CSS3之边框圆角:border-radius
- border-radius 圆角边框(CSS3.0)
- css3.0:border-radius 圆角边框
- css3:border-radius圆角边框详解
- CSS3第二日--圆角边框
- css3(border-radius)边框圆角详解
- css3(border-radius) 边框圆角详解
- css3(border-radius)边框圆角详解
- CSS3 border-radius实现边框圆角
- CSS3边框 圆角效果 border-radius
- css3(border-radius)边框圆角详解
- CSS3边框 圆角效果 border-radius
- markdown编辑器语法——字体、字号与颜色
- php和C#的yield实现对比
- android中listView下有Button按钮始终在最底部
- Jsp网页中全角空格和半角空格放入区别
- CocoaPods使用总结
- CSS3圆角边框
- Eclipse 的 Debug 介绍与技巧
- C#配置文件中的与数据库有关的字符串
- PHP cURL 应用(入门详解教程)
- java(4)------流程控制语句(if,switch,for,while,do-while)
- 分割字符串为回文串(每一个子串都是回文串)
- A. Round House
- Android ListView自适应高度和ScrollView冲突解决 [有效]
- 一些常用快捷键