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. linux修改时区为东八时区，北京时间，上海时间
			
    ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime echo "Asia/Shanghai" > /etc/tim ...
    
			
    2. 
						
  2. Jenkins安装以及配置
			
    Jenkins介绍 Jenkins是一个java开发的.开源的.非常好用持续集成的工具,它能帮我们实现自动化部署环境.测试.打包等等的工作,还可以在构建任务成功或者失败之后给我们发邮件通知. 什么叫持 ...
    
			
    3. 
						
  3. ssh 多秘钥管理和坑
			
    概述 很久之前就想研究一下 ssh 的多秘钥管理,今天正好有时间就研究了一下,挺简单的,记录下来,供以后开发时参考,相信对其他人也有用. 参考资料: Git - 生成 SSH公钥 , Linux 下多 ...
    
			
    4. 
						
  4. 【工具安装】VMware 安装教程
			
    介绍:介绍一下 VMware 的安装. 0x01. 下载软件 打开官网 VMware Workstation Pro 点击立即下载即可.  也可以直接使用迅雷,添加下载任务,比浏览器下载速度快些,提 ...
    
			
    5. 
						
  5. Android Jenkins自动打包纪录
			
    关于Jenkins自动打包Android的apk包,网上官方的太多,这里简单纪录一下博主的经历和打包的参数纪录 (本篇文章需要对Jenkins有最基本的基础了解) 博主所在公司曾负责app测试过程中发 ...
    
			
    6. 
						
  6. CentOS7linux通过http配置共享自动创建yum源的shell脚本
			
    因工作需要用到,所以记录一下配置流程 环境介绍: 两台CentOS7系统 yum源服务主节点IP:192.168.1.78 从节点IP:192.168.1.79(79从78上获取yum源) 配置78节 ...
    
			
    7. 
						
  7. 关于E980
			
    1. 浪商官网上面的内容貌似有点问题 来源: https://www.inspurpower.com/product/others.php?f=E980 但是wiki 里面的东西: 其实只有12cor ...
    
			
    8. 
						
  8. java8----Predicate接口的使用
			
    //5.lambda表达式中加入Predicate // 甚至可以用and().or()和xor()逻辑函数来合并Predicate, // 例如要找到所有以J开始,长度为四个字母的名字,你可以合并两 ...
    
			
    9. 
						
  9. PHP_OS的常见值
			
    PHP_OS是PHP中的一个预定义常量,表示当前操作系统.那么PHP_OS有哪些值可用呢??PHP_OS的值一般可以为:CYGWIN_NT-5.1,Darwin,FreeBSD,HP-UX,IRIX6 ...
    
			
    10. 
						
  10. Java 多线程编程之：notify 和 wait 用法
			
    wait 和 notify 简介 wait 和 notify 均为 Object 的方法: Object.wait() —— 暂停一个线程 Object.notify() —— 唤醒一个线程 从以上的 ...
    
			
    11.