border-radius是向元素添加圆角边框

使用方法：

border-radius:10px; /* 所有角都使用半径为10px的圆角 */

border-radius: 5px 5px 5px 5px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */

不要以为border-radius的值只能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。

实心上半圆：

方法：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。

div{

    height:50px;/*是width的一半*/

    width:100px;

    background:#9da;

    border-radius:50px 50px 0 0;/*半径至少设置为height的值*/

    }

实心圆：
方法：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。如下代码：

div{

    height:100px;/*与width设置一致*/

    width:100px;

    background:#9da;

    border-radius:50px;

    }

实心下半圆：

方法：把高度(height)设为宽度（width）的一半，并且只设置左下角和右下角的半径与元素的高度一致（大于也是可以的）。

div.circle2{
    height:50px;
    width:100px;
    background:#9da;
    border-radius:0 0 50px 50px;
}

实心左半圆：

方法：把宽度（width）设为高度(height)的一半，并且只设置左上角和左下角的半径与元素的高度一致（大于也是可以的）。

div.circle2{
    height:50px;
    width:100px;
    background:#9da;
    border-radius:50px 0 0 50px;
}

实例右半圆：

方法：把宽度（width）设为高度(height)的一半，并且只设置右上角和右下角的半径与元素的高度一致（大于也是可以的）。

div.circle2{
    height:50px;
    width:100px;
    background:#9da;
    border-radius:0 50px 50px 0;
}
代码演示：
<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>border-radius</title>

    <style type="text/css">

        div.circle{

            height:50px;/*是width的一半*/

            width:100px;

            background:#9da;

            border-radius:50px 50px  ;/*半径至少设置为height的值*/

        }

        div.circle1{

            height:100px;/*与width设置一致*/

            width:100px;

            background:#9da;

            border-radius:50px;

        }

        div.circle2{

            height:50px;

            width:100px;

            background:#9da;

            border-radius:  50px 50px;

        }

        div.circle3{

            height:100px;

            width:50px;

            background:#9da;

            border-radius:50px   50px;

        }

        div.circle4{

            height:100px;

            width:50px;

            background:#9da;

            border-radius:0px 50px 50px 0px;

        }

    </style>

</head>

<body>

<div class="circle">

</div>

<br/>

<div class="circle1">

</div>

<br>

<div class="circle2">

</div>

<br>

<div class="circle3">

</div>

<br>

<div class="circle4">

</div>

<br>

</body>

</html>

转载：http://www.imooc.com/code/380

												


											
CSS3边框 圆角效果 border-radius的更多相关文章
	

    
								
  1. 使用css3来实现边框圆角效果
		
    经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...
    
		
    2. 
						
  2. 第八十节，CSS3边框图片效果
		
    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释     CSS3 ...
    
		
    3. 
						
  3. CSS3 -- 边框圆角
		
    文章后有彩蛋哦 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
    
		
    4. 
						
  4. CSS3——边框  圆角  背景   渐变  文本效果
		
    边框 圆角边框 盒阴影 边界图片 圆角 CSS3 圆角制作器 指定每个角 背景 多重背景图像 大小 图像的定位 背景剪裁 渐变 线性渐变(Linear Gradients)- 向下/向上/向左/向右/ ...
    
		
    5. 
						
  5. CSS3 边框 圆角 背景
		
    CSS3用于控制网页的样式布局. CSS3是最新的CSS标准.   关于transform: transform:rotate(10deg);//顺时针方向旋转10° 浏览器支持情况:低版本的IE浏览 ...
    
		
    6. 
						
  6. css3之圆角效果 border-radius
		
    圆角效果 border-radius  border-radius是向元素添加圆角边框. 使用方法: border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border ...
    
		
    7. 
						
  7. 实现IE下兼容CSS3的圆角效果
		
    有些CSS3的牛逼的效果在IE下展示不出来是最烦人的啦,在项目中做的圆角效果到了IE下一堆方块....忒尴尬了...,找了个替代解决方案 1.首先下载一个js插件PIE.js百度一搜都是的,我也就不写 ...
    
		
    8. 
						
  8. CSS3实现圆角效果
		
    利用border-radius属性可以给元素div,input元素等添加圆角效果 后跟 值为这个圆角的半径,即数值越大效果越明显 -webkit-border-top/bottom-left/righ ...
    
		
    9. 
						
  9. 第 23 章 CSS3 边框图片效果
		
    学习要点: 1.属性初探 2.属性解释 3.简写和版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释 CSS3 提 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 数据结构和算法（Java版）快速学习（栈与队列）
			
    栈是仅允许在表尾进行插入和删除操作的线性表.我们把允许插入和删除的一端称为栈顶(top),另一端称为栈底(bottom).栈是一种后进先出(Last In First Out)的线性表,简称(LIFO ...
    
			
    2. 
						
  2. Jmeter之线程组（Stepping和Ultimate）
			
    jmeter自带的线程组比较简单,如果需要逐渐增加并发数的功能并不能实现,所以就需要使用Jmeter插件--Stepping Thread Group. 一.安装Stepping/UItimate T ...
    
			
    3. 
						
  3. Flink集群环境搭建
			
    环境准备 master:171:slave:171,172:flink版本:1.3.0 下载地址:http://archive.apache.org/dist/flink/flink-1.3.0/ 集 ...
    
			
    4. 
						
  4. zabbix添加主机后无法显示解决
			
    第一次添加主机后显示正常,后来删除了主机,重新添加了一下主机再也无法显示主机,很苦恼,原来需要点击重设,
    
			
    5. 
						
  5. 【ABAP系列】SAP Web Dynpro 技术简介
			
    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP Web Dynpro 技 ...
    
			
    6. 
						
  6. 在linux服务器上自动备份数据库
			
    脚本如下,没有任何问题: # !/usr/bin/pythonimport osimport timeimport datetimeimport pipesimport glob DB_HOST =  ...
    
			
    7. 
						
  7. JS 数组的常用方法详解归纳之改变原数组方法
			
    shift() 把数组的第一个元素从其中删除,并返回第一个元素的值, 如果数组是空的,那么 shift() 方法将不进行任何操作,返回 undefined 值.请注意,该方法不创建新数组,而是直接修改 ...
    
			
    8. 
						
  8. [Git] 024 log 命令的补充
			
    0. 回顾 [Git] 009 逆转未来 的 "1" 画张导图 其实 --oneline 前有个"关键字参数" "--pretty" --o ...
    
			
    9. 
						
  9. 【监控笔记】【1.4】Pssdiag和Sqldiag管理器
			
    --没有实操过,有点复杂,先写上以后有用到再深入研究 统计与诊断数据是任何 SQL故障修复工作的关键所在. 如果没有掌握这些数据,就无法确定数据性能问题的根源.数据表的瓶颈可能并不是由索引问题造成的: ...
    
			
    10. 
						
  10. 【烦人的字符集】linux字符集问题，中文乱码
			
    [1]快速修改命令 [2]locale 查看现在服务器的字符 [root@Master ~]# localeLANG=en_US.UTF-8LC_CTYPE="zh_CN.UTF-8&quo ...
    
			
    11.