text-shadow文字阴影
注:阴影的默认颜色是跟文字样色相同,通过逗号的方式进项行分割,可以设置阴影。默认值: none
text-shadow: h-shadow v-shadow blur color;
例子
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-shadow: 0 0 20px #fefcc9,
10px -10px 30px #feec85,
-20px -20px 40px #ffae34,
20px -30px 35px #ec760c,
-20px -40px 40px #cd4606,
0 -50px 65px #973716,
10px -70px 70px #451b0e;
}
div {
text-shadow:0 0 3px #FF0000;
}
</style>
</head>
<body>
<h1>求符合给定条件的整数集</h1>
<div>霓虹灯效果的文本阴影!</div>
</body>
</html>
box-shadow盒子阴影
默认值: none
box-shadow: h-shadow v-shadow blur spread color inset;
注:盒子阴影的默认颜色是黑色
默认就是外阴影,如果设置outset不起作用,可选的值只有inset表示内阴影。
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{width: 200px;height: 200px;background: red;margin: 100px;box-shadow: 10px 10px /* 10px */ 5px blue /* inset */;}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
margin:-100px;的意思就是四个边,上右下左,都缩小100px。
盒子阴影效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>李沁</title>
<style>
ul{list-style: none;}
li{float: left;margin: 50px;cursor: pointer;position: relative;top: 0;transition: .5s;border-radius: 3px;}
li:hover{top: -3px;box-shadow: 0px 5px 10px 3px green;}
</style>
</head>
<body>
<ul>
<li>
<img src="http://p4.itc.cn/images01/20201021/d0c9267035e64707bd4a2e5db0fa37d7.jpeg" alt="李沁"width="70%" height="60%">
</li>
<li>
<img src="https://p0.ssl.qhimgs4.com/t01d6d58bd5f709feea.bmp?size=440x494" alt=""width="70%" height="60%">
</li>
</ul>
</body>
</html>
box-reflect倒影和scale负值
box-reflect倒影和scale负值(了解)
above:
指定倒影在对象的上边
below:
指定倒影在对象的下边
left:
指定倒影在对象的左边
right:
指定倒影在对象的右边
blur模糊和calc计算
blur模糊和calc计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{filter:blur(10px);}
.parent{width: 800px;height: 300px;border: 1px solid red;}
.box{height: 100px;width: calc(100% - 100px);<!-- 得有空格-->background-color: yellow;/* float: right; */}
</style>
</head>
<body>
<img src="https://p0.ssl.qhimgs1.com/sdr/400__/t011183a68c4496d216.png" alt="">
<div class="parent">
<div class="box"></div>
</div>
</body>
</html>
CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
简单的说,CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。