网页中的透明属性、和文本、盒子阴影
透明属性
1 alpha 透明度 背景透明 background-color:rgba(0,0,0,0-1小数)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: #4c8ced;
}
.box{
width: 200px;
height: 200px;
margin: 100px auto;
background-color: rgba(0,0,0,.3);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2 opacity: 0-1 小数 0 完全透明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: #4c8ced;
}
.box{
width: 200px;
height: 200px;
margin: 100px auto;
background-color: rgb(0,0,0);
opacity: 0.4;/*盒子里的内容都透明*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
阴影
一、盒子阴影
box-shadow: 0 0 30px 0 rgba(0,0,0,.4);
1、水平阴影
2、垂直阴影
3、模糊距离
4、阴影尺寸
5、阴影的颜色
二、文字阴影
text-shadow: 1px 1px 1px #000000,-1px -1px 1px #ffffff；
1、水平阴影
2、垂直阴影
3、模糊距离
4、阴影的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 300px;
background-color: #fff;
margin: 200px auto;
box-shadow: 0 0 30px 0 rgba(0,0,0,.4);
line-height: 300px;
text-align: center;
font-size: 35px;
text-shadow: 10px 10px 50px #000000,-10px -10px 50px white;
}
.t{
width: 800px;
height: 200px;
background-color: #808080;
color: #808080;
font-size: 100px;
text-shadow: 1px 1px 1px #000000,-1px -1px 1px #ffffff;
}
.a{
width: 600px;
height: 200px;
background-color: #808080;
color: #808080;
font-size: 100px;
text-shadow: -1px -1px 1px #000000,1px 1px 1px #ffffff;
}
</style>
</head>
<body style="background: #e3e4e5">
<div class="box">
你好
</div>
<div class="t">
我是凸出来的
</div>
<div class="a">
我是凹回去的
</div>
</body>
</html>