CSS3中（border-radius）边框圆角详解

传统的圆角生成方案，必须使用多张图片作为背景图案。CSS3的出现，使得我们再也不必浪费时间去制作这些图片了，只需要border-radius属性，支持浏览器IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4

一、border-radius属性

CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、px、百分比等等。

比如,下面是一个div方框（宽高都是200，背景为红色，边框为2px solid #000）

现在设置它的圆角半径为50px,即：border-radius:50px;

这条语句同时将每个圆角的"水平半径"和"垂直半径"都设置为50px。

border-radius可以同时设置1到4个值。（想想我们之前的margin与padding）如果设置1个值，表示4个圆角都使用这个值。如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。

例：

border-radius:50px25px;//表示左上角和右下角使用第一个值，右上角和左下角使用第二个值

border-radius:25px10px50px;//左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值

border-radius:25px10px50px0;//左上角、右上角、右下角、左下角(顺时针顺序)

border-radius还可以用斜杠设置第二组值。这时，第一组值表示水平半径，第二组值表示垂直半径。第二组值也可以同时设置1到4个值，应用规则与第一组值相同。

border-radius:50px/25px;

border-radius:100px25px80px5px/45px25px30px15px;

二、单个圆角的设置

除了同时设置四个圆角以外，还可以单独对每个角进行设置。对应四个角，CSS3提供四个单独的属性：

* border-top-left-radius

* border-top-right-radius

* border-bottom-right-radius

* border-bottom-left-radius

这四个属性都可以同时设置1到2个值。如果设置1个值，表示水平半径与垂直半径相等。如果设置2个值，第一个值表示水平半径，第二个值表示垂直半径。

border-top-left-radius:50px;

border-top-left-radius:50px100px;//第一个值表示水平半径，第二个值表示垂直半径。

三、效果

实现代码：

width:0;
height:0;
border:100px solid gray;
border-radius:100px;
border-right-color:#fff;

实现代码：

height:100px;
width:200px;
background: red;
border-radius:100px/50px;

CSS3中（border-radius）边框圆角详解相关推荐

CSS3中font-face属性的用法详解
CSS3中font-face属性的用法详解 @font-face是CSS3中的一个模块,主要是把自定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕 ...
html table的边框线怎么变圆角_实现CSS3中的border-radius(边框圆角)示例代码
实现边框圆角 -moz-border-radius: 32px; -webkit-border-radius: 32px; border-radius: 32px; behavior: url(bor ...
css3中的属性选择器有哪些,CSS3中属性选择器使用方法详解
css中属性选择器我感觉与css2有比较大的区别了,下面我整理了一些关于css3选择器的使用例子,希望对各位会带来帮助. 注释: 一.属性选择器除了IE6不支持外,其他的浏览器都能支持. 二.E[at ...
CSS3: border-radius边框圆角详解
border-radius 基本语法: border-radius : none | <length>{1,4} [/ <length>{1,4} ]? 取值范围: <l ...
CSS基础篇--CSS/CSS3中的原生变量var详解
使用语法首先我们先来看一个例子: html代码: <div class="element">这是一段文字</div> css代码: .element {w ...
php选择符和举例子,关于CSS3中选择符的实例详解
英文原文: www.456bereastreet.com/archive/200601/css_3_selectors_explained/ 中文翻译: www.dudo.org/article.as ...
html中怎么做扇形菜单,CSS3实现扇形动画菜单流程详解
这次给大家带来CSS3实现扇形动画菜单流程详解,CSS3实现扇形动画菜单的注意事项有哪些,下面就是实战案例,一起来看一下. 原文章请点击这里简化版完整实例 CSS3扇形动画菜单 *{padding: ...
css 外弧_CSS3圆角详解
CSS3是样式表(style sheet)语言的最新版本,它的一大优点就是支持圆角. 网页设计大师Nicholas Zakas的最新文章,清晰易懂地解释了CSS3圆角的各个方面,非常值得学习.以下就是 ...
HTML中元素的position属性详解
HTML中元素的position属性详解转载自:https://blog.csdn.net/wangzunkuan/article/details/81540935 HTML中DOM元素有5种定位属 ...

CSS3中（border-radius）边框圆角详解

CSS3中（border-radius）边框圆角详解相关推荐

最新文章

热门文章