CSS3之Border-radius

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的更多相关文章

demo_01 css3中的radius
css属性:border-radius :border:边框:radius:弧度:所以这个属性的意思很明了. 下面实现一个小demo: <!doctype html> <html&g ...
css3学习--border
http://blog.sina.com.cn/s/blog_61671b520101gelr.html border-radius border-radius: 50px 20px;上下都是50px ...
css3实现border渐变色
案例1 .box{ width: 100px; height: 100px; border:10px solid #ddd; border-image: -webkit-linear-gradient ...
css3 做border = 0.5px的细线
参考: https://blog.csdn.net/Tyro_java/article/details/52013531
CSS3 用border写空心三角箭头 (两种写法)
之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~ 第一种写法利用常见的 after伪元素 <!DOCTYPE html> <h ...
css3动画使用技巧之—border旋转时的应用。
<html> <head> <title>css3动画border旋转时的应用.</title> <meta charset="UTF- ...
为 Web 设计师准备的 20 款 CSS3 工具
1.CSS3 Generator 2. Border Radius 3. CSS3 Maker 4. CSS3 Transforms 5. CSS3 Drop shadow generator 6. ...
[css]需警惕CSS3属性的书写顺序
转载张鑫旭:http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7% ...
针对css3特性浏览器兼容封装less
//--------------------------------------------------- // LESS Prefixer //--------------------------- ...
重温CSS：Border属性
边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

随机推荐

HTTP协议篇(一)：多工、数据流
管道机制.多工管道机制(Pipelining) HTTP 1.1 引入了管道机制(Pipelining),即客户端可通过同一个TCP连接同时发送多个请求.如果客户端需要请求两个资源,以前的做法是在同 ...
POJ 2311 Cutting Game [Multi-SG?]
传送门题意:n*m的纸片,一次切成两份,谁先切出1*1谁胜 Multi-SG? 不太一样啊本题的要求是后继游戏中任意游戏获胜就可以了.... 这时候,如果游戏者发现某一单一游戏他必败他就不会再玩了 ...
Javascript原型继承容易忽略的错误
编写Javascript的开发者都知道,JS虽然没有类(ES6添加了class语法),但是可以模拟出OOP语言的类和面向对象的概念,比如我们都知道的一句话,Javascript中处处是对象,而面向对象 ...
Chrome Stylist 插件 (CSS备份)
Stylist 插件还是很好用的,可以给网站自定义CSS样式,(还有个插件叫"油猴子",可以给网页加载自定义JS): 不过麻烦的是,现在的最新版360浏览器不能显示这个插件(这个浏 ...
自动化测试工具selenium的使用
1.自动化测试的前提
Java经典编程题50道之四十六
编程实现两个字符串的连接. public class Example46 { public static void main(String[] args) { addString( ...
C/C++语言的特点
一.支持数据封装和数据隐藏在C++中,类是支持数据封装的工具,对象则是数据封装的实现.C++通过建立用户定义类支持数据封装和数据隐藏. 在面向对象的程序设计中,将数据和对该数据进行合法操作的函数封装 ...
浅谈扩展欧几里得算法(exgcd)
在讲解扩展欧几里得之前我们先回顾下辗转相除法: \(gcd(a,b)=gcd(b,a\%b)\)当a%b==0的时候b即为所求最大公约数好了切入正题: 简单地来说exgcd函数求解的是\(ax+by ...
bzoj 1188 [HNOI2007]分裂游戏 SG函数 SG定理
[HNOI2007]分裂游戏 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1394 Solved: 847[Submit][Status][Dis ...
.net 分割字符串
string a = "1-2-3-4-5-6-7-8-9"; string[] b = a.Split(new Char[] { '-' }); for (int i = 0; ...

CSS3之Border-radius

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

随机推荐

热门专题