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. 模仿spring-aop的功能，利用注解搭建自己的框架。

    入JAVA坑7月有余,也尝试自己手动搭建框架,最近对spring aop的这种切面很着迷,为此记录下自己目前搭出来的小小的demo,后续有时间也会继续改进自己的demo.望大神们不吝赐教. 主要还是运 ...

  2. 18_Python列表常用方法总结

    ''' 1.列表切片索引\截取 2.列表的增删改查 3.列表最大值\列表最小值\排序 4.列表的遍历 5.列表的嵌套 6.列表和字符串的互转 7.判断元素是否在列表中 ''' #列表使用中括号表示 元 ...

  3. java中的各种Queue

    java中的各种并发Queue可以归为以下的几种: ConcurrentLinkedQueue: 一个由链表结构组成的非阻塞队列 ArrayBlockingQueue :一个由数组结构组成的有界阻塞队 ...

  4. JS代码中加上alert才能正常显示效果

    模拟一个生成验证码的效果,发现JS代码中加上alert可以正常刷新,没有alert时图片就会丢失,找到解决方法,但是还不是很明白,先记录下来. 生成验证码的servlet代码如下: package s ...

  5. 高斯消元 & 线性基【学习笔记】

    高斯消元 & 线性基 本来说不写了,但还是写点吧 [update 2017-02-18]现在发现真的有好多需要思考的地方,网上很多代码感觉都是错误的,虽然题目通过了 [update 2017- ...

  6. ASP.NET Core Razor 页面使用指南

    ASP.NET Core Razor 页面作为 ASP.NET Core 2.0的一部分发布,它是基于页面的全新的Web开发框架.如果您想学习如何使用 ASP.NET Core Razor 页面,可以 ...

  7. Windows实用快捷键

    1 返回上一级目录:Backspace 2 复制当前窗口:Ctr + N 3 在当前文件目录中选定首个文件(夹):Space 4  切换窗口:Alt + Tab 5 当前浏览器Tab页倒退或前进历史页 ...

  8. docker 实践(一)

    docker 简介 容器虚拟化,比传统的虚拟化轻量 2013年出现,发展非常迅猛 Redhat在6.5版本开始支持docker 使用go语言开发,基于apache2.0协议 开源软件,项目代码在git ...

  9. Python逻辑运算符

    逻辑运算符主要用来做逻辑判断,逻辑运算符和比较运算符放一起的,同样用于条件选择和循环. 以下假设变量 a 为 10, b为 20: 示例1: #and是并且,所有的条件都是True,结果才是True: ...

  10. yml 文件操作方法

    文件读取方法示例: import yaml fr = open('yml_file_address', 'r',encoding='utf-8') data = yaml.load(fr) print ...