1. box-sizing
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>box-sizing</title>
<style>
/*
box-sizing 怪异盒模型
content-box：width和height设置的是盒子内容区的大小（默认值）
border-box：width和height设置的是盒子总大小（怪异盒模型）
*/
.box1 {
width: 200px;
height: 200px;
background-color: skyblue;
padding: 5px;
border: 1px solid black;
margin-bottom: 20px;
}
.box2 {
width: 200px;
height: 200px;
background-color: gray;
padding: 5px;
border: 1px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>2. resize
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>resize</title>
<style>
/*
resize 调整盒子大小
none：不允许用户调整大小（默认值）
both：可以调节元素的高度和宽度
horizontal：可以调节元素的宽度
vertical：可以调节元素的高度
*/
.box1 {
width: 400px;
height: 200px;
background-color: skyblue;
resize: h;
overflow: scroll;
}
.box2 {
width: 800px;
height: 600px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>3. box-shadow
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>box-shadow</title>
<style>
.box1 {
width: 400px;
height: 400px;
background-color: orange;
margin: auto;
margin-top: 100px;
font-size: 40px;
/* 写两个值：水平位置 垂直位置 */
/* box-shadow: 10px 10px; */
/* 写三个值：水平位置 垂直位置 阴影颜色 */
/* box-shadow: 10px 10px blue; */
/* 写三个值：水平位置 垂直位置 阴影模糊程度 */
/* box-shadow: 10px 10px 10px; */
/* 写四个值：水平位置 垂直位置 阴影模糊程度 阴影颜色 */
/* box-shadow: 10px 10px 20px blue; */
/* 写五个值：水平位置 垂直位置 阴影模糊程度 阴影的外延 阴影颜色 */
/* box-shadow: 10px 10px 20px 10px blue; */
/* 写五个值：水平位置 垂直位置 阴影模糊程度 阴影的外延 阴影颜色 内阴影*/
/* box-shadow: 10px 10px 20px 10px blue inset; */
/* box-shadow: 0px 0px 50px red inset; */
position: relative;
top: 0;
left: 0;
transition: 0.3s linear all;
}
.box1:hover {
box-shadow: 0px 0px 20px red;
}
</style>
</head>
<body>
<div class="box1">带带大师兄</div>
</body>
</html>4. opacity
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>opacity</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: orange;
font-size: 40px;
opacity: 0.2;
}
.box2 {
position: relative;
width: 400px;
}
h1 {
position: absolute;
top: 100px;
left: 0;
background-color: black;
color: white;
width: 100%;
line-height: 100px;
text-align: center;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="box1">带带大师兄</div>
<div class="box2">
<img src="../images/你瞅啥.jpg" alt="">
<h1>你瞅啥</h1>
</div>
</body>
</html>
评论 (0)