您的位置：首页 > Web前端 > CSS

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

2017-04-07 11:29 585 查看

一、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>

效果：

鼠标悬停上第2个圆上，发生变化

鼠标悬停上第5个扇上，发生变化

鼠标悬停上第6个半圆上，发生变化

奇数与偶数的颜色

3的倍数颜色

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航