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>

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

IE兼容CSS3圆角border-radius,box-shadow,text-shadow的方法

IE兼容CSS3圆角border-radius,box-shadow,text-shadow的方法 1.下载ie-css3.htc   2.CSS box { -m...
  • qijuju
  • qijuju
  • 2017年02月28日 18:04
  • 84

css让图片变成圆角矩形 border-radius: 15px;

.wrapper img {border-radius: 15px;} border-radius:2em;等价于:border-top-left-radius:2em; border-top-rig...
  • forest_fire
  • forest_fire
  • 2016年03月21日 10:51
  • 3182

IFE2015-task1

1、用HTML实现如下简单界面 html代码: task0001 MyGithubAccountName Homepage Blog 这是二级标题 这是我的第一个HTML页面,这...
  • li_zhuoqing
  • li_zhuoqing
  • 2016年11月19日 19:15
  • 1500

阴影box-shadow,圆角border-radius,渐变背景background兼容性

阴影的兼容用法 .pxs_container{ box-shadow:0px 0px 7px #000; -moz-box-shadow:0px 0px 7px #000; -webkit-b...
  • wangrongrong1990
  • wangrongrong1990
  • 2017年04月19日 17:34
  • 371

了解一下border-radius的实现原理

一、简述我们都知道css 3有一个属性border-radius可以给盒子设置圆角,我当初也只是知道有这个属性,并且知道一些用法,从来没有深入了解过它的作用原理。我们知道将border-radius设...
  • xiaoermingn
  • xiaoermingn
  • 2016年12月07日 02:06
  • 2710

使用border-radius无效,能看到背景还是方形的,边框变成圆角了的解决方案

解决方案: 1、设置border:none; 去掉边框;2、设置border-radius:40px; 若遇到浏览器兼容的​问题,可加上兼容的css代码;3、最后,使用box-shadow: 0px...
  • qq_17505335
  • qq_17505335
  • 2017年06月15日 15:25
  • 2771

图片transform其父级的border-radius失效

当transform遇见border-radius就会碰出bug的火花
  • u011456552
  • u011456552
  • 2016年12月05日 12:36
  • 1018

IE浏览器兼容CSS3新属性border-radius

使用PIE对IE进行CSS3兼容介绍及渲染 重要功能实现:   可以使 IE6、7、8 、9 实现类似 chrome 和 firefox  1.  更自然逼真的阴影效果,不再是以前那种丑陋的滤镜效...
  • oo191416903
  • oo191416903
  • 2017年03月21日 11:47
  • 5069

百度web-ife前端学院-task1学习笔记

用两种方法来实现一个背景色为红色、宽度为960px的在浏览器中居中 实现思路为:一、利用设置左右margin为auto,自动居中;二、利用绝对定位和负边距来居中 html主要代码如下实现一个背景色...
  • la413972057
  • la413972057
  • 2016年01月05日 19:38
  • 1522

IE8兼容border-radius

最近在写PC端活动页面,UI给的设计稿里边有大量的圆角。咨询过做PC端的同事,说只能兼容到IE9。但是心里不甘心,于是在网上找到了PIE.htc文件。发现它能完美兼容IE8。在这里我把代码步骤给大家罗...
  • wanglufei_1992
  • wanglufei_1992
  • 2016年07月13日 10:53
  • 9808
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:border-radius 圆角矩形
举报原因:
原因补充:

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