早晨在前端交流群里，有个朋友问css实现单侧投影的办法，因为这个朋友前几天刚发过照片，晒他买的csssecrets，我问他你书买来还没看吗？ 他说来不及翻书了，项目比较急上来问一下。 我顿时觉得真是暴殄天物了。看到下面有几个人都在问，于是直接写了几个demo发出去。 不想学习的借口有很多，没有时间是比较低级的一个。
box-shadow做单边投影的核心是第四个参数 扩张半径，这个参数会根据你指定的值去扩大或缩小投影尺寸，如果我们用一个负的扩张半径，而他的值刚好等于模糊半径，那么投影的尺寸就会与投影所属的元素尺寸完全一致，除非使用偏移量来移动他，否则我们将看不到任何投影。
因此，如果此时给予一边一个正的偏移，你就会在该侧看到单边投影的效果。
顶部单边投影：
box-shadow: #000 0 -5px 5px -5px;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=10,IE=9,IE=8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>练小习的前端技术笔记</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: #f1f1f1;
margin: 20px ;
box-shadow: #000 0 -5px 5px -5px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
提示：你可以先修改部分代码再运行。
底部单边投影：
box-shadow: #000 0 5px 5px -5px;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=10,IE=9,IE=8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>练小习的前端技术笔记</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: #f1f1f1;
margin: 20px ;
box-shadow: #000 0 5px 5px -5px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
提示：你可以先修改部分代码再运行。
左侧单边投影：
box-shadow: #000 -5px 0 5px -5px;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=10,IE=9,IE=8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>练小习的前端技术笔记</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: #f1f1f1;
margin: 20px ;
box-shadow: #000 -5px 0 5px -5px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
提示：你可以先修改部分代码再运行。
右侧单边投影：
box-shadow: #000 5px 0 5px -5px;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=10,IE=9,IE=8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>练小习的前端技术笔记</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: #f1f1f1;
margin: 20px ;
box-shadow: #000 5px 0 5px -5px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
提示：你可以先修改部分代码再运行。
如果我们想在两侧投影：
box-shadow: 5px 0 5px -5px #000,-5px 0 5px -5px #000;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=10,IE=9,IE=8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>练小习的前端技术笔记</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: #f1f1f1;
margin: 20px ;
box-shadow: 5px 0 5px -5px #000,-5px 0 5px -5px #000;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
提示：你可以先修改部分代码再运行。
腾讯云开发者
