盒子效果案例

最新推荐文章于 2024-01-04 07:44:24 发布

原创最新推荐文章于 2024-01-04 07:44:24 发布 · 406 阅读

0 ·

CC 4.0 BY-SA版权

案例同时被 2 个专栏收录

27 篇文章

订阅专栏

html

25 篇文章

订阅专栏

鼠标放上有阴影效果，显得立体：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>

	div {
		width: 200px;
		height: 200px;
		transition: all 1s;
		
	}
	div:hover {  
		box-shadow: 0 15px 30px rgba(0,0,0,0.1);
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

鼠标放上有边框且不撑开盒子：
原理：利用伪元素创建一个和父亲盒子一模一样大小的盒子，接着让伪元素定位压着父亲盒子，在鼠标放上时显示伪元素的边框。
注意：伪元素要用css3box-sizing: border-box;盒模型
在这里插入图片描述
方法1：
该方法使用于用背景图片

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div {
		width: 632px;
		height: 340px;
		position: relative;
		border-radius: 10px;
		overflow: hidden;
	}
	div:hover::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		border: 10px solid rgba(0, 0, 0, 0.5);
		box-sizing: border-box;
	}

	</style>
</head>
<body>
	<div>
		<img src="mi.jpg" alt="">
	</div>
</body>
</html>

方法2：该方法适用于背景图案

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 200px;
      height: 150px;
      background-color: green;
      float: left;
      margin-left: 10px;
      /*有一个和背景颜色一样的边框*/
      border: 2px solid green;
    }
    div:hover{
      border: 2px solid red;
    }
  </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

盒子间的边框线合并案例
盒子紧挨，本身有个浅灰色的边框为1px，中间紧挨部分也为1px，鼠标放上对应盒子边框显示不同颜色
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div {
		width: 250px;
		height: 400px;
		border: 1px solid #ccc;
		float: left;
		/*使div中间的线只有1px，由于浮动的特性，第二个元素先挨着第一再向左移动*/
		margin-left: -1px; 	
	}
	div:hover {
		border: 1px solid #f40;
		/*使得鼠标放上的盒子边跨都有颜色，相对定位不脱离标准流，但是是浮起来了，所以层级高*/
		/*如果不设置这个的话，后一个div压着前一个，鼠标放上盒子的右边框不是hover设置的颜色*/
		position: relative;
	}
	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>

若每个盒子已经设置过相对定位，则可用z-index来解决

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div {
		width: 250px;
		height: 400px;
		border: 1px solid #ccc;
		float: left;
		margin-left: -1px;
		/*盒子内部用到相对定位*/
		position: relative;
		/*默认z-index: 0;*/
	}
	div:hover {
		border: 1px solid #f40;
		z-index: 1;
	}
	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>