css单边投影与双侧投影

早晨在前端交流群里,有个朋友问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>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏生信宝典

Graphpad,经典绘图工具初学初探

大多数科研文章都离不开图表,尤其是图,熟悉一些绘图软件,并将图在文章和PPT中展示出来,是科研训练的重要内容。漂亮的文章配图能给自己的工作加不少分,生信宝典推出...

1411
来自专栏数据小魔方

R语言可视化——ggplot的theme订制

ggplot作图系统在R预言诸多可视化包中之所以如此的风靡,除了它拥有自己的图层理念之外,我觉得还要归功于它对于图表细节元素的灵活调整。 对于ggplot的初学...

2733
来自专栏coding

python使用PIL给图片添加文字生成海报

那时的我,对于未来有很多遐想:写小说、写时评、写诗歌... 总而言之,就是成为一个文字工作者

1822
来自专栏数据小魔方

excel模拟运算功能

今天要跟大家分享的是excel的模拟运算功能! 在金融、财务领域中需要处理很多敏感性分析以及不同方案的收益风险对比等风险问题,这些问题都可以通过excel中的模...

2847
来自专栏自学笔记

Unity基本操作以及Roll A Ball窗口界面以及菜单Roll A Ball

第一个手部图标,可以拖动物体,对准物体点击就可以拖动。第二个就是指针图标,可以选择物体的移动方向。可以选择x,y,z三个方向进行移动。第三个就是旋转图标,可以...

672
来自专栏MelonTeam专栏

UI走查与显示器色彩偏差

UI提了一个UI走查问题,说一个按钮的底色不对。 ? 标明色值为0xff3b30。 我一看代码,看见 ? 没有问题啊,然后在模拟器上取色值,发现,还真的不对,屏...

20510
来自专栏小白课代表

有需求+小白课代表的软件目录(5.9)

1653
来自专栏逍遥剑客的游戏开发

延迟渲染的G-Buffer压缩

1533
来自专栏吉浦迅科技

让NVIDIA Jetson AGX Xavier火力全开的秘密

之前我们写过让Jetson TX2火力全开的秘密,让大家知道命令行工具nvpmodel能够定义一组参数,从而有效地定义给定功率的性能。

1.7K3
来自专栏PPV课数据科学社区

【课程推荐】数据可视化神器-tableau入门

数据可视化——Tableau Tableau Desktop 是基于斯坦福大学突破性技术的软件应用程序。Tableau 是桌面系统中最简单的商业智能工...

3153

扫码关注云+社区