首页 开发教程 CSS3 入门教程 实例解析CSS3圆角的实现方法

"CSS3 入门教程"的目录

开始学习CSS3
CSS3 简介
CSS3 边框
CSS3 圆角
CSS3 背景
CSS3 渐变
CSS3 文本效果
CSS3 字体
CSS3 2D 转换
CSS3 3D 转换
CSS3 过渡
CSS3 动画
CSS3 多列
CSS3 用户界面
CSS 图片
CSS 按钮
CSS 分页实例
CSS3 框大小
CSS3 弹性盒子(Flex Box)
CSS3 多媒体查询
CSS3 多媒体查询实例
27个精致的CSS3动画效果源代码下载
CSS3选择器归类整理（附CSS优先级要点）
多种CSS3渐变应用方法总结附实例
CSS3旋转实例学习（附3D旋转实例）
实例解析CSS3圆角的实现方法
CSS3阴影实现方法及技巧全解
7款CSS3动画效果分享
CSS3 备忘录

CSS3 入门教程 实例解析CSS3圆角的实现方法

2024-02-25 开发教程 CSS3 入门教程 匿名 10℃

过去如果我们用传统的方法要实现圆角边框，需要使用多张图片作为背景图案才可以。CSS3出现后添加了一个新的属性border-radius，就可以轻松实现圆角边框的效果,一方面省去了制作图片的时间，另一方面省去了浏览器加载图片造成的延迟和带宽。不过要使用支持该属性的浏览器才能运行。主流浏览器如Safari，谷歌浏览器，IE，Opera和火狐浏览器可支持border-radius属性。

语法

.roundElement	{
	border-radius: 10px;
}

上面的这句代码的作用是设置一个元素的四个角的弧度半径值都为10px。你也可以对每个角单独指定：角的弧度半径值都为10px。你也可以对每个角单独指定：

.pearElement	{
	border-top-left-radius: 7px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 8px;
}

如果你觉得上面的写法太复杂，可以使用下面border-radius简写的方法：

.oddRoundElement {
	border-radius: 12px 5px 12px 5px;
	/* or */
	border-radius: 12px 5px;
}

四个值分别代表的是top-left, top-right, bottom-right, bottom-left四个角。

实例解析

首先来看看效果图：

HTML代码：

<a href="#" class="button green">button</a>
<a href="#" class="button blue">button</a>
<a href="#" class="button gray">button</a>

如果没有 CSS ，那么上面的 HTML 执行起来是这样的：

CSS3的编写：

.button {
    display: inline-block;
    position: relative;
    margin: 10px;
    padding: 0 20px;
    text-align: center;
    text-decoration: none;
    font: bold 12px/25px Arial, sans-serif;
}

一些不同颜色的按钮样式：

.green {
    color: #3e5706;
    background: #a5cd4e;
}
/* Blue Color */
.blue {
    color: #19667d;
    background: #70c9e3;
}
/* Gray Color */
.gray {
    color: #515151;
    background: #d3d3d3;
}

到这一步后按钮看起来是这样的：

用 CSS 处理圆角：

.button {
    display: inline-block;
    position: relative;
    margin: 10px;
    padding: 0 20px;
    text-align: center;
    text-decoration: none;
    font: bold 12px/25px Arial, sans-serif;
    text-shadow: 1px 1px 1px rgba(255,255,255, .22);
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    -o-transition: all 0.15s ease;
    -ms-transition: all 0.15s ease;
    transition: all 0.15s ease;
}

现在的按钮圆润多了，看看：

还不够啊，没有立体效果，再完善完善：

/* Green Color */
.green {
    color: #3e5706;
    background: #a5cd4e; /* Old browsers */
    background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* IE10+ */
    background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* W3C */
}
/* Blue Color */
.blue {
    color: #19667d;
    background: #70c9e3; /* Old browsers */
    background: -moz-linear-gradient(top,  #70c9e3 0%, #39a0be 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#70c9e3), color-stop(100%,#39a0be)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* IE10+ */
    background: linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* W3C */
}
/* Gray Color */
.gray {
    color: #515151;
    background: #d3d3d3; /* Old browsers */
    background: -moz-linear-gradient(top,  #d3d3d3 0%, #8a8a8a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3d3d3), color-stop(100%,#8a8a8a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* IE10+ */
    background: linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* W3C */
}

现在爽了，漂亮了，你喜欢这样的按钮吗？

为了让按钮更大一点，我们增加了个 big 样式：

<a href="#" class="button big green">sign in <span>One minute</span></a>
<a href="#" class="button big blue">sign in <span>One minute</span></a>
<a href="#" class="button big gray">sign in <span>One minute</span></a>
/* Big Button Style */
.big {
    padding: 0 40px;
    padding-top: 10px;
    height: 45px;
    text-transform: uppercase;
    font: bold 20px/22px Arial, sans-serif;
}
.big span {
    display: block;
    text-transform: none;
    font: italic normal 12px/18px Georgia, sans-serif;
    text-shadow: 1px 1px 1px rgba(255,255,255, .12);
}

大按钮的效果：

我们还需要处理下当鼠标移到按钮上方时显示不同的效果：

.button:hover {
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
    box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
}
.button:active {
    -webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
    -moz-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
    box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
}

效果如下：

各浏览器对border-radius的支持

因为这种圆角技术是CSS3里出现的，老式浏览器或较早期的浏览器中用到这个属性时需要在CSS里添加浏览器引擎前缀(vendor prefixes)。会是{prefix}-border-radius这样一个样子，而具体各种浏览器引擎前缀是下面这样的写法：

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
/* 火狐浏览器 */
-moz-border-radius-topleft:15px; /* top left corner */
-moz-border-radius-topright:50px; /* top right corner */
-moz-border-radius-bottomleft:15px; /* bottom left corner */
-moz-border-radius-bottomright:50px; /* bottom right corner */
-moz-border-radius:10px 15px 15px 10px;  /* shorthand topleft topright bottomright bottomleft */
/* webkit引擎的浏览器 */
-webkit-border-top-left-radius:15px; /* top left corner */
-webkit-border-top-right-radius:50px; /* top right corner */
-webkit-border-bottom-left-radius:15px; /* bottom left corner */
-webkit-border-bottom-right-radius:50px; /* bottom right corner */

基本上，你需要对每种浏览器引擎做各自的声明，加上这些讨厌的稍微不同的代码来保证完全支持border-radius。但是，如果你使用的是最新版的浏览器，包括火狐、谷歌、IE等，你不需要使用这些前缀，因为这个技术已经很成熟，在各种最新版的浏览器里已经受到了普遍支持。

让IE支持border-radius

直到IE9才有对border-radius属性的支持，相信很多Web开发人员和Web应用设计人员都很沮丧。在IE9里，最重要的一个点是使用edge META 标记：

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
border-top-right-radius: 7px;
border-top-left-radius: 7px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
</style>

如果你的IE比较老，不支持border-radius，有很多其它的技术可以弥补这个缺陷，最好的一个解决方法是使用一个很小的JavaScript程序包，叫做CurvyCorners。这个CurvyCorners用javaScript动态的生成很多div标记，用这些div标记来绘出圆角效果，甚至支持消除锯齿功能。
CurvyCorners的用法很简单。第一步是在页面中引入CurvyCorners.js脚本：

<!-- SIMPLY INCLUDE THE JS FILE! -->
<script type="text/javascript" src="curvy.corners.trunk.js">
</script>

CurvyCorners会在DOM元素里寻找具有border-radius属性的元素，然后依次给它们制作出圆角效果。不需要辅助图片。你甚至可以设置指定元素的弧度半径：

var settings = {
	tl: { radius: 12 },
	tr: { radius: 12 },
	bl: { radius: 12 },
	br: { radius: 12 },
	antiAlias: true
};
/* moooo */
$$('.round').each(function(rd) {
  curvyCorners(settings,rd);
});

建议你应该指定需要使用圆角的元素，因为让脚本搜索整个页面来寻找需要圆角处理的元素是一个很耗CPU的过程，而且这个过程是每个页面加载时都会执行。

上一节： CSS3旋转实例学习（附3D旋转实例）
下一节： CSS3阴影实现方法及技巧全解

备案信息： 粤ICP备15087711号-2

Copyright © 2008-2024 啊嘎哇在线工具箱 All Rights.

本站所有资料来源于网络，版权归原作者所有，仅作学习交流使用，如不慎侵犯了您的权利，请联系我们。