CSS_09_盒子模型(二)
程序员文章站
2022-05-27 09:02:36
...
CSS3盒模型
box-sizing设置盒子类型，默认盒子模型为content-box,css3增加了border-box,这样计算盒子的大小方式也发生改变。
-
box-sizing:content-box盒子大小等于width+padding+bolder; -
box-sizing:border-box盒子的大小为width,也就是说设置padding、bolder不会撑开盒子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style>
div:first-child {
color: red;
width: 200px;
height: 50px;
border: 1px solid #000;
/*默认盒子模型*/
box-sizing: content-box;
padding: 50px;
margin: 10px;
}
div:last-child {
width: 200px;
height: 80px;
border: 10px solid red;
box-sizing: border-box;
padding-left: 30px;
/* 边框往里面增加，padding值如果在容量范围内不会撑大盒子*/
}
</style>
</head>
<body>
<div>默认centent-box 盒子模型</div>
<div>css3新增 border-box</div>
</body>
</html>
盒子阴影
box-shadown用来设置盒子阴影，与文字阴影相似。
格式：box-shadown:水平阴影 垂直阴影 阴影程度 阴影颜色 阴影尺寸(面积大小) 内外阴影(inset);
内外阴影设值为outset不起作用,而且还会报错。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子阴影</title>
<style>
div:first-child {
color: yellow;
font-size: 40px;
/*水平距离 垂直距离 模糊程度 阴影颜色*/
text-shadow: 5px 5px 1px rgba(0,0,0,0.1);
}
div:last-child {
width: 200px;
height: 200px;
border: 5px solid pink;
/*水平距离 垂直距离 模糊程度 阴影尺寸(影子大小) 阴影颜色 内外阴影（只允许写inset）*/
box-shadow: 5px 5px 10px 5px rgba(255,0,0,0.2) inset;
}
</style>
</head>
<body>
<div>大吉大利，今晚吃鸡</div>
<div></div>
</body>
</html>
比如小米的官网就用盒子阴影效果，鼠标点击商品时就会出现阴影。
简单效果实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子阴影模拟</title>
<style>
body {
background-color: #f5f5f5;
}
.mi {
height: 246px;
width: 234px;
border-right: 1px solid #ffffff;
background-color: #fff;
margin: 200px 200px;
box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}
.img {
height: 150px;
width: 150px;
background-image: url("../img/mi.jpg");
background-size: 150px 150px;
background-repeat: no-repeat;
margin: 10px 40px;
}
a {
text-decoration: none;
color: #000;
}
span {
display: inline-block;
padding-left: 30px;
}
.big a {
color: #000;
font: 14px "Helvetica Neue";
}
.small a {
color: #9d9d9d;
font: 10px "Helvetica Neue";
padding-left: 12px;
}
.price {
color: #ff6700;
font-size: 12px;
padding: 10px 90px;
}
</style>
</head>
<body>
<div class="mi">
<div class="img"></div>
<span class="big">
<a href="#">米家互联网空调(一级能效)</a>
</span> <br>
<span class="small">
<a href="#">米家互联网空调(一级能效)</a>
</span>
<span class="price">
2294元
</span>
</div>
</body>
</html>
立体球
设置内部盒子阴影为高光和外部盒子阴影暗黑，达到视觉立体效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水晶</title>
<style>
div {
width: 249px;
height: 249px;
margin: 100px;
background: #fff url("../img/水晶.jpeg") 0 0 no-repeat;
font-size: 30px;
text-align: center;
color: rgba(255,255,255,0.8);
line-height: 249px;
border-radius: 50%;
/* 内阴影和外阴影效果*/
box-shadow: 5px 5px 5px 5px rgba(255,255,255,0.4) inset,
5px 4px 10px rgba(0,0,0,0.4);
}
</style>
</head>
<body>
<div>水晶图片</div>
</body>
</html>
上一篇： 通过界面调试chrome无头浏览器
下一篇： Headless无头浏览器的入门使用