鼠标移动时显示特效文字DIV的焦点
2019-01-07 20:40:43162<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{padding:0%;margin:0%;}
#box{width: 100px;height: 100px;background: violet;border:10px dotted #ccc;margin: 20px auto;border-radius: 10px;}
.main{width: 100px;height: 100px;background: violet;border-top:10px solid #ccc;border-bottom: 10px solid #ccc;margin: 100px auto;}
button{border:none;margin: 20px;}
.shadow{width: 300px;height:40px;margin: 20px auto;}
.shadow:hover{width: 300px;height:40px;box-shadow: 0px 6px 30px #ccc inset;margin: 20px auto;}
</style>
</head>
<body>
<div id="box"></div>
<div class="main"></div>
<div class="shadow">特效</div>
</body>
</html>