CSS3 border-radius弧形和圆角应用详解教程-css3教程-ab蓝学网
当前位置: &
CSS3 border-radius弧形和圆角应用详解教程
简介:WEB前端|border-radius是CSS3中诞生的新样式，它可以使边框的边角变成弧形和圆角。以往制作按钮、弧形边框时需要使用背景切图的方式实现；不但臃肿，而且还容易产
border-radius是CSS3中诞生的新样式，它可以使边框的边角变成弧形和圆角。以往制作按钮、弧形边框时需要使用背景切图的方式实现；不但臃肿，而且还容易产生布局BUG，不适于自适应框架的书写。
首先介绍一下语法：
border-radius：[&&length&&|&&percentage&&]{1,4} [ / [&&length&&|&&percentage&&]{1,4} ]?
&length&：用长度值设置对象的圆角半径长度；不允许负值。
&percentage&：用百分比设置对象的圆角半径长度；不允许负值。
说明一下：
第一个值是水平半径。
如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。
如果第二个值为任意值，则会改变圆角的弧度，具体效果下面会举例进行演示
如果任意一个值为0，则这个角是矩形，不会是圆的。
当然，此值不允许是负值。
CSS3适用的浏览器：
IE9.0、Firefox、Safari、Chrome、Opera
CSS3测试实例：
水平与垂直半径相同时：
提供1个参数 border-radius:10
提供2个参数 border-radius:10px 20
提供3个参数 border-radius:10px 20px 30
提供4个参数 border-radius:10px 20px 30px 40
水平与垂直半径不同时：
提供1个参数 border-radius:10px/5
提供2个参数 border-radius:10px 20px/5px 10
提供3个参数 border-radius:10px 20px 30px/5px 10px 15
提供4个参数 border-radius:10px 20px 30px 40px/5px 10px 15px 20
除了以上的几种表达方式以外，还可以指定某个角生成弧形样式。
左上角圆角：border-radius-topleft : 10px
右上角圆角：border-radius-topright: 10px
左下角圆角：border-radius-bottomleft : 10px
右下角圆角：border-radius-bottomright : 10px
转载注明本文地址：
如果觉得《CSS3 border-radius弧形和圆角应用详解教程》不错，请把本站告诉您身边的朋友！
上一编：下一编：还没有任何记录...
css3圆角实现方法（border-radius）
来源：jquery插件
作者： 懒人建站
css3圆角实现方法是（border-radius），css3半圆的画法、css3四分之一圆的实现方法是把高度和宽度设置为相等，只设置一个圆角，其半径等于高度或宽度。本例代码如下。
css3圆角实现方法是（border-radius）下面对使用border-radius来画出css3正圆、css3半圆、css3四分之一圆等画法探讨测试。
css3圆角浏览器支持情况：IE9及其以上，火狐，谷歌等浏览器。
css3圆角的书写顺序：border-radius:上 右 下 左 例如：border-radius:10px 4px 20px 10
如果四个角的弧度相同可以这样写：border-radius:6 &&
css3圆角border-radius的单位也支持百分比%
使用border-radius实现正圆的方法：border-radius:100%; & &
css3半圆的画法：左边半圆就是高度设为宽度的一半，radius只写下和左即可 如： radius: 0 0 200px 200
#quartercircle{
& width: 200
& height: 100
& background-color: #a72525;
& border-radius: 0 0 200px 200
具体情况大家可以自己动手试试，各种情况都试试看能画出那些类型的半圆来。
css3四分之一圆的实现方法是把高度和宽度设置为相等，只设置一个圆角，其半径等于高度或宽度。本例代码如下。
#quartercircle {
width: 200
height: 200
background-color: #a72525;
border-radius: 200px 0 0 0;
本文链接：/css3/css3-border-radius.html
css3圆角实现方法（border-radius）由懒人建站收集整理，您可以自由传播，请主动带上本文链接
就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。
(责任编辑：懒人建站)
css3圆角实现方法（border-radius）-相关文章
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）习惯了方方框框，我们会使用圆角技术使网页变得很圆润，而不是一个个棱角。圆角被广泛运用于网页中，比如把边框加个圆角，这是最流行的用法，让网页看起来很舒服。还有就是用户的头像，把它做成一个圆形的，看到现在的网页中出现的频率也很大。
以前制作圆角的方法比较繁琐，山顶角、洋葱皮、PS切图、制图…一系列的技巧，而现在我们可以利用CSS3的一个属性就可以轻松实现圆角，甚至是各种畸形的形状。
border-radius语法
border-radius ： none | {1,4} [ / {1,4} ]?
相关属性： border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius
在线的border-radius工具：
关于兼容性：看过别人写过的一篇文章，说的如果你的网站弹出请使用xx浏览器以达到最佳的用户体验，说明你已经落伍了。其实兼容性对于大型网站来说还是很重要的，但一般自己的博客就不必做大量的兼容了，Chrome都换了自家的内核，opera换了Webkit，IE版本都到11了，可以放心地使用CSS3的一些属性了。IE9+支持，border-radius 属性Opera和IE不用设置，语法可以这么写：
-webkit-border-radius: 10
-moz-border-radius: 10
border-radius: 10
border-radius的一些用法
利用border-radius可以设置四个角不同的radius，可以用boder加上不同的边框，用不同的背景background使元素实心或者空心，总之你可以利用很多技巧来使元素变得与众不同。
用border-radius画一个圆
width: 200
height: 200
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%; & //这里的值就是100px
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：56786次
积分：1691
积分：1691
排名：第17008名
原创：82篇
转载：144篇
译文：14篇
(5)(1)(2)(3)(3)(1)(2)(2)(2)(5)(9)(6)(8)(5)(4)(26)(11)(5)(7)(6)(4)(9)(5)(5)(18)(2)(2)(7)(12)(7)(9)(15)(16)(17)border-radius画空心圆（使用一个标签也可以做出以下效果） - 推酷
border-radius画空心圆（使用一个标签也可以做出以下效果）
首先来看一张图片：
要实现这一的一个效果图，我2B了，竟然忘记设置宽高，真心觉得蛋疼，手写代码的赶脚还是差很多啊。
.circlrOutBox{position:top:50%;left:50%;width:200height:200}
.circleBox{position:}
.circle{position:border:1px solid #border-radius:50%;}
.circle:nth-child(1){width:200height:200top:-100left:-100}
.circle:nth-child(2){width:100height:100top:-50left:-50}
.circle:nth-child(3){width:50height:50top:-25left:-25}
&div class=&circlrOutBox&&
&&&div class=&circleBox&&
&&&&&div class=&circle&&&/div&
&&&&&div class=&circle&&&/div&
&&&&&div class=&circle&&&/div&
这些是很通常的思维，但是如果说只考虑标准浏览器的话，那还有一个更好的办法。
.circle,.circle:before,.circle:after{position:top:50%;left:50%;border:1px solid #border-radius:50%;}
.circle{width:100height:100margin:-50px 0 0 -50}
.circle:before{content:'';width:200height:200margin:-100px 0 0 -100}
.circle:after{content:'';width:50height:50margin:-25px 0 0 -25}
&div class=&circle&&&/div&
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致border-radius:100px / 10中这个除法是如何使用的
非常感谢！
写下你的评论...
你是过来搞笑的吗
写下你的评论...
是不是椭圆的ab轴呢？
写下你的评论...
Copyright (C)
All Rights Reserved | 京ICP备 号-2}