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. Design a stack that supports getMin() in O(1) time and O(1) extra space
			
    Question: Design a Data Structure SpecialStack that supports all the stack operations like push(), p ...
    
			
    2. 
						
  2. 如何在maven项目中引用领一个项目
			
    1 有两个项目 maven01  和maven 02,想在maven 02中引用maven01的方法,该如何操作呢 maven01中Factory类中的方法 public class Factory  ...
    
			
    3. 
						
  3. 【IOS打包】ARCHIVE FAILED：Command CodeSign failed with a nonzero exit code
			
    [问题] [解决办法] 用xcode打开项目 command + k 重启电脑 参照:xcode打包报错command codesign failed with a nonzero exit code ...
    
			
    4. 
						
  4. hibernate中get和load区别
			
    在日常开发中,获取数据时必不可少的,这样就要用到get和load方法来实现了.下面简单说一下get和load的区别. 1.返回值不同 使用get方法检索数据时,没有该数据返回值为null. 而使用lo ...
    
			
    5. 
						
  5. 是否被封禁ip或端口的检测网站 ping
			
    国内的: http://tool.chinaz.com/port (可以检测端口) https://tools.ipip.net/ping.php (貌似不可以检测端口) 国外的: https://w ...
    
			
    6. 
						
  6. SAMBA服务和FTP服务讲解
			
    rz sz window和Linux之间小文件的传输 yum install lrzsz -y rz:window文件传送到linux中 sz:把Linux文件传送到window 防火墙: 立即关闭但 ...
    
			
    7. 
						
  7. tensorflow实践学习一
			
    前言: 最近开始学习tensorflow框架,主要参考<TensorfFlow技术解析与实战>这本书,如果有同学需要这本书的PDF版,可以给我评论里留下邮箱,我看到了会发给你 正文 1.T ...
    
			
    8. 
						
  8. C语言第九周编程作业
			
        这个作业属于哪个课程 C语言程序设计 这个作业的要求在哪里 https://pintia.cn/problem-sets/1120145772099268608 我在这个课程的目标是 了解结构 ...
    
			
    9. 
						
  9. Oracle SQL调优
			
    在多数情况下,Oracle使用索引t来更快地遍历表,优化器主要根据定义的索引来提高性能. 但是,如果在SQL语句的where子句中写的SQL代码不合理,就会造成优化器删去索引而使用全表扫描,一般就这种 ...
    
			
    10. 
						
  10. Mybatis-学习笔记（6）Mybatis的事务管理机制
			
    1.什么是事务. 多个数据库原子访问应该被绑定成一个整体,这就是事务.事务是一个最小的逻辑执行单元,整个事务不能分开执行,要么同时执行,要么同时放弃执行. 事务的4个特性:原子性.一致性.隔离性.持续 ...
    
			
    11.