《2018年11月29日》【连续421天】
标题：css3盒子模型，小米实例；
内容：
css3盒子模型；
div {
width: 300px;
height: 300px;
padding: 30px;
border-right: 20px solid red;
background-color: blue;
box-sizing: border-box; /*加入后，盒子不会被border和padding撑开*/
/*box-sizing: content-box;*/ /*默认，会被padding和border撑开*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
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(255,255,255,.5);
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
<img src="mi.jpg" alt="">
</div>
</body>
</html>
扫一扫
859
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
