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. 4、Shiro之IniRealm以及用户登录认证，角色认证，权限认证
			
    1.我们在项目test文件夹下面新建resourse文件夹并将她设置为资源文件夹: 2.在resourse文件夹下面新建user.ini文件 user.ini文件里面声明一个用户: 先写一个用户标签[ ...
    
			
    2. 
						
  2. 异步分发任务celery
			
    Celery简介 Celery是一个功能完备即插即用的任务队列.它使得我们不需要考虑复杂的问题,使用非常简单. celery适用异步处理问题,当遇到发送邮件.或者文件上传, 图像处理等等一些比较耗时的 ...
    
			
    3. 
						
  3. ssm项目dao层方法异常：org.apache.ibatis.binding.BindingException: Invalid bound statement
			
    在IntelliJ IDEA中用ssm框架搭建了一个demo项目,在执行到dao层方法时抛出这个异常: org.apache.ibatis.binding.BindingException: Inva ...
    
			
    4. 
						
  4. Stream介绍
			
    一.Stream介绍 现在有这样的需求:有个菜单list,菜单里面非常多的食物列表,只选取小于400卡路里的并且按照卡路里排序,然后只想知道对应的食物名字. 代码: package com.cy.ja ...
    
			
    5. 
						
  5. JavaScript对象之--- RegExp
			
    1.概述 正则表达式是描述字符模式的对象. 正则表达式用于对字符串模式匹配以及检索替换: 2.语法 前者为模式,后者为修饰符. var reg = new RegExp( "xyz" ...
    
			
    6. 
						
  6. pyinstaller如何将自己写的模块一并打包到exe中
			
    使用pyinstaller命令 pyinstaller -F main.py 打包时,若mian.py代码中存在引入自己写的模块,而打包成exe文件时,并不会自动引入自己写的模块,打包成功后,点击打开 ...
    
			
    7. 
						
  7. expect替人进行交互
			
    expect是一门独立于shell的语言 用expect 执行写好的脚本 #!/usr/bin/expectspawn ssh root@192.168.40.67  (spawn  是expect  ...
    
			
    8. 
						
  8. pandas中.value_counts()的用法
			
    原文链接:https://www.jianshu.com/p/f773b4b82c66 value_counts()是一种查看表格某列中有多少个不同值的快捷方法,并计算每个不同值有在该列中有多少重复值 ...
    
			
    9. 
						
  9. numpy的linalg.norm()函数求范数
			
    函数签名:def norm(x, ord=None, axis=None, keepdims=False) 其中ord参数表示求什么类型的范数,具体参见下表 下面是用代码对一个列表求上面的范数 imp ...
    
			
    10. 
						
  10. 2019第二周总结.Java
			
    本学期开始学习Java课程了,首先我先说说学习Java的感觉吧,它不像C语言程序设计,但是又有语言开发的共同点.学Java语言重点是面向对象的程序设计,更加的适应生活需要和计算机开发的需要. 总的来讲 ...
    
			
    11.