border-radius 圆角矩形

原创 2015年11月19日 14:37:58
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div{
	width:100px;
	height:100px;
	border:1px solid red;
	margin:10px;
	float:left;
	text-align:center;
	}
div:nth-of-type(1)
	{
	border-radius:10px/10px;
	}
div:nth-of-type(2)
{
	border-radius:15px;
	
	}
div:nth-of-type(3)
{
	border-radius:15px 15px 0 0;
	
	}
	div:nth-of-type(4)
{
	border-radius:15px 0 15px 0;
	
	}
	div:nth-of-type(5)
{
	border-radius:5px 15px 0 15px;
	
	}
	div:nth-of-type(6)
{
	border-radius:50%;
	
	}
div:nth-of-type(7)
{
	border-radius:50px;
	
	}
img{
	border:3px solid #ccc;
	border-radius:50%;
	}
div:nth-of-type(8)
{
	border-radius:50%;
	height:50px;
	
	}
div:nth-of-type(9)
{
	border-radius:100px 100px 0 0;
	height:50px;
	
	}
div:nth-of-type(10)
{
	border-radius:100px 0 0 0;
	}
div:nth-of-type(11)
{
	border-radius:100px 0 0 0;
	height:50px;
	}
div:nth-of-type(12)
{
	border-radius:100px 0 100px 0;
	}
</style>
</head>

<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<img src="云课堂/image/10.jpg"/>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

css3:border-radius圆角边框详解

前言 今天来聊聊这个 border-radius 属性,radius的英文意思是弧度的意思,而国人更喜欢称之为圆角,因为它可以使得我们的边框有棱有角。当年前辈们都是用图片君搞定圆角的年代或用一条...

编写手机端自适应页面案例,springMVC代码,SpringMVC上传代码,去掉input框中原有的样式,使ios按钮没有圆角,css中的border-radius类似

1、编写的页面  pageEncoding="UTF-8"%> http://java.sun.com/jsp/jstl/core" prefix="c"%> http://www.w3.org/T...

CSS3 圆角(border-radius)

值:半径的长度 前缀: -moz(例如 -moz-border-radius)用于Firefox -webkit(例如:-webkit-border-radius)用于Safari和Chrome。 ...

CSS3 border-radius实现边框圆角

border-radius实现边框圆角   这是css3的属性 border-radius:3px; -webkit-border-radius:3px; -moz-border-radius...

CSS3简明教程-2.2.CSS3边框之 圆角border-radius

CSS3的元素圆角是一项很有用的改进。正如前文所说,在CSS3之前,要处理元素的圆角是很费劲的,CSS3仅用一个属性仅能完成,那就是:border-radius。...

CSS3圆角详解:border-radius

一、CSS3圆角的优点   传统的圆角生成方案,必须使用多张图片作为背景图案。CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点:   * 减少维护的工作量。图...

css3(border-radius)边框圆角详解

border-top-left-radius: 50px 100px;//第一个值表示水平半径,第二个值表示垂直半径。border-radius: 100px 25px 80px 5px / 45px...

CSS3 圆角(border-radius)详解

现在有了 CSS3 的 border-radius 特性之后,实现边框圆角效果就非常简单了,而且其还有多个优点:一是减少网站维护工作量;二是提高了网站的性能,少了对图片的 HTTP 的请求,网页载...

CSS3 经典教程系列:CSS3 圆角(border-radius)详解

《CSS3 入门教程系列》前一篇文章详细介绍了 CSS3 RGBA 特性的用法,今天这篇文章我们在一起来看看 CSS3 中用于实现圆角效果的 border-radius 属性的具体用法。   以前制...

css属性之--moz-border-radius 圆角属性-不过很遗憾不兼容ie

大家也知道,CSS3将可能在明年就正式的加入到了我们的设计中,而这篇教程也是来自国外。这里只是稍微的翻译下,希望大家能够从中领悟。 圆角效果,首先我们应该来创建一个DIV和简单的CSS吧。 cs...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:border-radius 圆角矩形
举报原因:
原因补充:

(最多只允许输入30个字)