1、属性介绍

border-radius：none|12.3px，取值不可为负数，表示边框圆角

相关属性：border-top-right-radius ,

border-bottom-right-radius ,

border-bottom-left-radius ,

border-top-left-radius

2、版本兼容性

（1）IE不兼容

（2）火狐2.0不兼容

（3）Opera 9.64不兼容

（4）Chrome 1.0.x和2.0.x兼容

3、属性实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3之Border-radius</title>
<style type="text/css">
    body{
		width:50%;
		height:100%;
		font-size:14px;
	}
    div{
		width:100%;
		height:100px;
		text-align:center;
		vertical-align:middle;
		alignment-adjust:after-edge;
		alignment-baseline:after-edge;
		font-family:Tahoma, Geneva, sans-serif;

		border-style:solid;
		border-width:thick;

		-moz-border-radius:12px;
		-webkit-border-radius:20px;

		-moz-border-radius-bottomleft:12px;
		-webkit-border-bottom-left-radius:12px;

		-moz-border-radius-bottomright:12px;
		-webkit-border-bottom-right-radius:12px;

		-moz-border-radius-topleft:12px;
		-webkit-border-top-left-radius:12px;

		-moz-border-radius-topright:12px;
		-webkit-border-top-right-radius:12px;
	}
</style>
</head>

<body>
   <div>
      设置边框四方向的圆角
   </div>

</body>
</html>

4、浏览器运行结果

CSS3之Border-radius的更多相关文章

  1. demo_01 css3中的radius

    css属性:border-radius :border:边框:radius:弧度:所以这个属性的意思很明了. 下面实现一个小demo: <!doctype html> <html&g ...

  2. css3学习--border

    http://blog.sina.com.cn/s/blog_61671b520101gelr.html border-radius border-radius: 50px 20px;上下都是50px ...

  3. css3实现border渐变色

    案例1 .box{ width: 100px; height: 100px; border:10px solid #ddd; border-image: -webkit-linear-gradient ...

  4. css3 做border = 0.5px的细线

    参考: https://blog.csdn.net/Tyro_java/article/details/52013531

  5. CSS3 用border写 空心三角箭头 (两种写法)

    之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~ 第一种写法 利用常见的 after伪元素 <!DOCTYPE html> <h ...

  6. css3动画使用技巧之—border旋转时的应用。

    <html> <head> <title>css3动画border旋转时的应用.</title> <meta charset="UTF- ...

  7. 为 Web 设计师准备的 20 款 CSS3 工具

    1.CSS3 Generator 2. Border Radius 3. CSS3 Maker 4. CSS3 Transforms 5. CSS3 Drop shadow generator 6. ...

  8. [css]需警惕CSS3属性的书写顺序

    转载张鑫旭:http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7% ...

  9. 针对css3特性浏览器兼容 封装less

    //--------------------------------------------------- // LESS Prefixer //--------------------------- ...

  10. 重温CSS：Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

随机推荐

  1. pwd 的“P”选项

    1.目录是链接目录时,pwd -P  显示出实际路径,而非使用连接(link)路径:pwd显示的是连接路径 例: [root@localhost soft]# cd /etc/init.d [root ...

  2. 豆瓣爬虫小记(lowB版)

    爬虫小记 学习玩python正则之后,想利用正则知识学学网络爬虫. 需求分析 按照自己平时浏览的网页,留意下哪个网页的信息对自己有价值,分析要爬取哪些网页信息.这里我先爬取简单的静态网页,豆瓣网经典电 ...

  3. HDU 4825 Xor sum

    trie树的异或和问题 本题是一道经典题,使用trie树维护所给出的集合,我们知道等比数列前n项的和比第n+1项小,所以本题可以使用贪心策略,对于每一个询问,我们从高位向低位匹配,寻找最大异或值,向下 ...

  4. UOJ #274. 【清华集训2016】温暖会指引我们前行 [lct]

    #274. [清华集训2016]温暖会指引我们前行 题意比较巧妙 裸lct维护最大生成树 #include <iostream> #include <cstdio> #incl ...

  5. BZOJ 3265: 志愿者招募加强版 [单纯形法]

    传送门 一个人多段区间,一样.... 不过国家队论文上说这道题好像不能保证整数解.... #include <iostream> #include <cstdio> #incl ...

  6. 设计模式之“Decorator”注疏#02

    装饰模式在某种意义上来说也是挺原始的, 它首先需要一个你被装饰的基础类, 再来是需要一个基于这个基础类的原始包装器,可以看作是其它包装器的基础类 进而通过继承这个包装器,来构建出多个具有各自功能的特定 ...

  7. Windows Server 2016-抢占FSMO角色

    很多情况下,当生产域控制器发生问题无法修复的情况下,我们只能通过抢占FSMO角色以保证用户验证等正常或及时恢复.一般在同一个域环境中,我们往往都会有主备或主辅域控规划,平时工作的时候,两台域控可以实现 ...

  8. iOS "此证书由未知颁发机构签名"此问题的解决方法

    前段时间制作证书时把以前钥匙串中的证书全删除了,然后在制作新证书的时候就出现了"此证书由未知颁发机构签名"的红色警告,通过查找资料发现出现此问题的原因是:我把钥匙串中的此证书给删除 ...

  9. PHPUnit-附录 A. 断言 (assert)

    [http://www.phpunit.cn/manual/5.7/zh_cn/appendixes.assertions.html] 本附录列举可用的各种断言方法. assertArrayHasKe ...

  10. EF数据迁移，未将对象引用设置到对象实例

    现象: 执行Enable-Migrations -force时就报"未将对象引用设置到对象实例"的异常: DbProviderServicesExtensions.GetProvi ...