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、属性实例

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>CSS3之Border-radius</title>
  6. <style type="text/css">
  7.     body{
  8. 		width:50%;
  9. 		height:100%;
  10. 		font-size:14px;
  11. 	}
  12.     div{
  13. 		width:100%;
  14. 		height:100px;
  15. 		text-align:center;
  16. 		vertical-align:middle;
  17. 		alignment-adjust:after-edge;
  18. 		alignment-baseline:after-edge;
  19. 		font-family:Tahoma, Geneva, sans-serif;
  20.  
  21. 		border-style:solid;
  22. 		border-width:thick;
  23.  
  24. 		-moz-border-radius:12px;
  25. 		-webkit-border-radius:20px;
  26.  
  27. 		-moz-border-radius-bottomleft:12px;
  28. 		-webkit-border-bottom-left-radius:12px;
  29.  
  30. 		-moz-border-radius-bottomright:12px;
  31. 		-webkit-border-bottom-right-radius:12px;
  32.  
  33. 		-moz-border-radius-topleft:12px;
  34. 		-webkit-border-top-left-radius:12px;
  35.  
  36. 		-moz-border-radius-topright:12px;
  37. 		-webkit-border-top-right-radius:12px;
  38. 	}
  39. </style>
  40. </head>
  41.  
  42. <body>
  43.    <div>
  44.       设置边框四方向的圆角
  45.    </div>
  46.  
  47. </body>
  48. </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. Java POI读取Excel数据,将数据写入到Excel表格

    1.准备 首先需要导入poi相应的jar包,包括: 下载地址:http://pan.baidu.com/s/1bpoxdz5 所需要的包的所在位置包括: 2.读取Excel数据代码 package S ...

  2. CSS选择器的组合选择器之后代选择器和子元素选择器

    实例代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...

  3. DIV+CSS中的滤镜和模糊

    在div+css中,经常会用到div和span 当内容比较多的时候,会用到div 当内容比较少的时候,会用到span 来看下面的代码: <!DOCTYPE html> <html&g ...

  4. c# 简单实现 插件模型 反射方式

    利用反射方式实现插件模型,wpf控件作为插件,然后用另外的窗体加载. 首先定义插件接口: public interface IUserControlLevel1 { string PluginName ...

  5. xBIM WeXplorer xViewer 基本应用

    目录 基础 xBIM WeXplorer 简要介绍 xBIM WeXplorer xViewer 基本应用 xBIM WeXplorer xViewer 浏览器检查 xBIM WeXplorer xV ...

  6. python爬虫（3）——SSL证书与Handler处理器

    一.SSL证书问题 上一篇文章,我们创建了一个小爬虫,下载了上海链家房产的几个网页.实际上我们在使用urllib联网的过程中,会遇到证书访问受限的问题. 处理HTTPS请求SSL证书验证,如果SSL证 ...

  7. 恢复linux系统文件夹颜色

    /etc/DIR_COLORS 默认值 # Background color codes:# 40=black 41=red 42=green 43=yellow 44=blue 45=magenta ...

  8. 升级gitlab

    https://gitlab.com/gitlab-org/gitlab-ce/tree/master/doc/update https://about.gitlab.com/update/#cent ...

  9. Netty的常用概念

    我们先来看一段代码: // Configure the server. EventLoopGroup bossGroup = new NioEventLoopGroup(1); EventLoopGr ...

  10. Java实现邮箱验证

    Java实现邮箱验证 JavaMail,顾名思义,提供给开发者处理电子邮件相关的编程接口.它是Sun发布的用来处理email的API.它可以方便地执行一些常用的邮件传输.我们可以基于JavaMail开 ...