CSS3之圆角
CSS3圆角border-radius也是比较常用的，有了圆角，可以少很多图片了:)
语法：
border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?
说明：length不可为负值。border-radius是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的。
一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<style>
#radius
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:350px;
height:200px;
border-radius:25px;
-moz-border-radius:25px;
}
</style>
</head>
<body>
<div id="radius">Border-Radius</div>
</body>
</html>
图：
设置两个值时，对角的值相同，top-left和bottom-right取第一个值，另外两个角取另一个值。
<!DOCTYPE html>
<html>
<head>
<style>
#radius
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:350px;
height:200px;
border-radius:25px 50px;
-moz-border-radius:25px 50px;
}
</style>
</head>
<body>
<div id="radius">Border-Radius</div>
</body>
</html>
效果：
另外还可以分别设置每个角的水平和垂直半径：
border-radius:15px 30px / 20px 10px;
等价于：
border-top-left-radius:15px 20px；
border-bottom-right-radius:15px 20px;
border-top-right-radius:30px 10px;
border-bottom-left-radius: 30px 10px;
效果：
另外，当圆角半径小于等于边框厚度时，内圆角会是方形的，这也很好理解，例如：
border:20px solid #a1a1a1;
border-radius:20px;
效果：
当圆角半径大于边框厚度时，边框内部也会呈现圆角效果：
border:10px solid #a1a1a1;
border-radius:20px;
效果：
可以利用圆角绘制圆形：
<!DOCTYPE html>
<html>
<head>
<style>
#radius
{
text-align:center;
margin:50px auto;
width:0;
height:0;
border:100px solid #a1a1a1;
border-radius:100px;
}
</style>
</head>
<body>
<div id="radius"></div>
</body>
</html>
效果：
还记得那个CSS3的哆啦A梦么？就是用了很多圆角绘制的。
CSS3之圆角的更多相关文章
- 超简单CSS3实现圆角、阴影、透明效果
CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用CSS3就方便很多了,虽然现在各浏览器对CSS3的支持还不是很好,但不久的将来CSS3就会普及. 1.圆角 CSS3实现圆角有两种方法. ...
- CSS3 -- 边框圆角
文章后有彩蛋哦 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- CSS3 border-radius 圆角属性
使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角". 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. -webkit- 或 -moz- ...
- 利用CSS3实现圆角的outline效果的教程
一.首先,outline是个很牛的东西1. border近亲outline和border是近亲,为什么这么讲呢?首先,都是给元素外面套框框的:其次,支持的属性值几乎都是一样的,例如,outline-s ...
- 无需图片，使用CSS3实现圆角按钮[转]
首先来看看效果: 事例HTML代码: <a href="#" class="button green">button</a> < ...
- css3 样式 圆角
第一次学习css3 现在总结一下,方便以后查看: 1.border-radius:25px; 这个用来增加圆角属性 2.CSS3边框阴影 在 CSS3 中,box-shadow 用于向方框添加阴影: ...
- 用CSS3写圆角（超简单）
前缀: -moz(例如 -moz-border-radius)用于Firefox-webkit(例如:-webkit-border-radius)用于Safari和Chrome. CSS3圆角(所有的 ...
- CSS3 边框 圆角 背景
CSS3用于控制网页的样式布局. CSS3是最新的CSS标准. 关于transform: transform:rotate(10deg);//顺时针方向旋转10° 浏览器支持情况:低版本的IE浏览 ...
- 【转载】无需图片，使用CSS3实现圆角按钮
原文地址:http://www.open-open.com/home/space-37924-do-blog-id-5789.html 首先来看看效果: 事例HTML代码: <a href=&q ...
随机推荐
- Hibernate与MyBatis区别
Hibernate是当前主流的ORM框架,对数据库结构提供了较为完整的封装. MyBatis同样也是非常流行的ORM框架,主要在于pojo与SQL之间的映射关系. 区别: 1.两者最大的区别 针对简单 ...
- 26种提高ASP.NET网站访问性能的优化方法 .
1. 数据库访问性能优化 数据库的连接和关闭 访问数据库资源需要创建连接.打开连接和关闭连接几个操作.这些过程需要多次与数据库交换信息以通过身份验证,比较耗费服务器资源. ASP.NET中提供了连接池 ...
- android.database.sqlite.SQLiteCantOpenDatabaseException: unknown error(Sqlite code 14): Could not open database,(OS error - 13:Permission denied)
07-24 15:03:14.490 6291-6291/com.tongyan.nanjing.subway E/SQLiteDatabase: Failed to open database '/ ...
- C#托管代码与C++非托管代码互相调用
http://www.cnblogs.com/Jianchidaodi/archive/2009/03/11/1407270.html#1473515 http://www.cnblogs.com/J ...
- Grid_Oracle Grid Infrastructure概念介绍（概念）
2014-03-09 Created By BaoXinjian Thanks and Regards
- PLSQL_Oracle PLSQL内置函数大全（概念）
2014-06-20 Created By BaoXinjian
- HDU - 5685 Problem A（逆元）
这题我第一次想的就是直接模拟,因为我是这样感觉的,输入n是3次方,长度是5次方,加起来才8次方,里面的操作又不复杂,感觉应该能过,然而不如我所料,TLE了,玛德,这是第一次的代码. #include ...
- MySQL作业
创建作业事件 MONTH STARTS '2015-01-01 05:30:01' ON COMPLETION NOT PRESERVE ENABLE DO CALL sp_moveLoginReco ...
- Win8驱动测试模式
打开驱动测试模式(保存成bat文件,双击执行) bcdedit /set testsigning on pause 执行完成后,看见提示操作成功的提示,之后我们重启一下,再次进入系统,在桌面的右下角会 ...
- c# as
as:用于检查在兼容的引用类型之间执行某些类型的转换. Employee myEmployee = myObject as Employee; if (myEmployee != null) { } ...