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. [Python]ctypes+struct实现类c的结构化数据串行处理
			
    1. 用C/C++实现的结构化数据处理 在涉及到比较底层的通信协议开发过程中, 往往需要开发语言能够有效的表达和处理所定义的通信协议的数据结构. 在这方面是C/C++语言是具有天然优势的: 通过str ...
    
			
    2. 
						
  2. Docker安装CentOS7
			
    1. 拉取镜像 docker pull centos:centos7 2. 启动镜像创建容器 docker run -d -p 36622:22 -p 36680:80 --name centos7- ...
    
			
    3. 
						
  3. QT Desinger设计窗体应用程序框架
			
    目录 目录 前言 系统软件 QT Designer Using QT Designer Open QTDesigner Tool Widget Box QT Designer的布局 属性栏 示例 i  ...
    
			
    4. 
						
  4. Linx下Keepalived做成服务
			
    在/usr目录下面执行: find -name keepalived 返回如下: ./sbin/keepalived ./local/sbin/keepalived ./local/etc/keepa ...
    
			
    5. 
						
  5. 正经Python汤不热爬虫
			
    转自:https://github.com/facert/tumblr_spider install pip install -r requirements.txt run python tumblr ...
    
			
    6. 
						
  6. maven spark Scala idea搭建maven项目的 pom.xml文件配置
			
    1.pom.xml文件配置,直接上代码. <?xml version="1.0" encoding="UTF-8"?> <project xm ...
    
			
    7. 
						
  7. lograte切割tengine日志
			
    记录 /srv/logs/nginx/*log { create 0644 nobody nobody daily rotate 10 missingok notifempty compress sh ...
    
			
    8. 
						
  8. 在线cron表达式生成工具
			
    http://cron.qqe2.com/ 名称 是否必须 允许值 特殊字符 秒 是 0-59 , - * / 分 是 0-59 , - * / 时 是 0-23 , - * / 日 是 1-31 , ...
    
			
    9. 
						
  9. [转帖]linux screen 命令详解，xshell关掉窗口或者断开连接，查看断开前执行的命令
			
    linux screen 命令详解,xshell关掉窗口或者断开连接,查看断开前执行的命令 https://binwaer.com/post/12.html yun install -y screen ...
    
			
    10. 
						
  10. Java——LinkedList底层源码分析
			
    1.简介 LinkedList 是用链表结构存储数据的,很适合数据的动态插入和删除,随机访问和遍历速度比较慢.另外,他还提供了 List 接口中没有定义的方法,专门用于操作表头和表尾元素,可以当作堆栈 ...
    
			
    11.