CSS3 创建圆角边框及矩形添加阴影

最新推荐文章于 2024-05-28 21:23:25 发布

凌冰_

最新推荐文章于 2024-05-28 21:23:25 发布

阅读量3.1k

点赞数 1

分类专栏： CSS3

本文链接：https://blog.csdn.net/hlx20080808/article/details/69524994

版权

CSS3 专栏收录该内容

33 篇文章

订阅专栏

一、nth-of-type(n) 第N个子元素

二、border-radius 圆角

三、box-shadow 阴影

index.html页面

<style type="text/css">

  /* 圆角 */
  div{
	  width:200px;
	  height:100px;
	  background:#F93;
	  border:2px solid gray;  /*边框 */
	  border-radius:25px;  /* 矩形有圆角 */
	  box-shadow:10px 10px 5px #888; /*方框添加一个或多个阴影 */
	  margin:20px;  /*外边距 */
	  float:left;
  }
  /*:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.*/
  /* 圆 */
  div:nth-of-type(2){
	  width:100px;
	  height:100px;
	  border-radius:50%; /*  长宽100=矩形有圆角100/2 */
  }
  /*悬停上为矩形 */
  div:nth-of-type(2):hover{
	  border-radius:0%;  /*矩形有无角*/
  }
  
  /*制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值*/
div:nth-of-type(3){
	width:50px;
	height:100px;
	border-radius:0px 50px 50px 0px;
	
}
/*左半圆*/
div:nth-of-type(4){
	width:50px;
	height:100px;
	border-radius:50px 0px 0px 50px;
	
}

/*
[扇形]
"三同"是元素宽度、高度、圆角半径相同
"一不同"是圆角取值位置不同*/
div:nth-of-type(5){
	width:100px;
	height:100px;
	border-radius:100px 0px 0px 0px;
}
/* 悬停上发生变化 */
div:nth-of-type(5):hover{
	border-radius:0px 0px 0px 100px;
}

/*制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值*/
div:nth-of-type(6){
	width:100px;
	height:50px;
	border-radius:50px 50px 0px 0px;
}

div:nth-of-type(6):hover{
	border-radius:50px 50px;
}

div:nth-of-type(7){
	width:100px;
	height:50px;
	border-radius:0px 0px 50px 50px;
}

/*Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
在这里，我们为奇数和偶数 div元素指定两种不同的背景色：*/
div:nth-of-type(odd){
	background:#00F;
}
div:nth-of-type(even){
  background:#F09;	
}

/*使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
在这里，我们指定了下标是 3 的倍数的所有 div 元素的背景色：*/
div:nth-of-type(3n+0){
	background:#333; /* 深灰色*/
}
</style>
</head>

<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

效果：