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 条评论
登录 后参与评论

相关文章

来自专栏coding

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

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

37520
来自专栏量子位

你值得收藏:这个免费AI可以神奇拯救低分辨率照片

允中 发自 LZYY 量子位 出品 | 公众号 QbitAI 有些事PS也做不好。 比如让分辨率很低的老照片变清晰就很难。还有没办法拯救?当然有,这是毫无疑问的...

38870
来自专栏数据小魔方

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

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

33030
来自专栏小白课代表

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

16440
来自专栏数据小魔方

think-cell chart系列14——组合图表(折线图+饼图)

今天继续跟大家分享think-cell chart系列14——组合图表(折线图+饼图)。 think-cell chart中图表可以轻松的通过各种组合方式,来展...

71250
来自专栏区块链源码分析

用零知识证明解决投票安全

我们经常会遇到需要给别人投票的情况,比如有些公司会组织员工给领导做反向打分,但是往往员工都不敢“真心实意”的打分,为什么呢?归根结底是害怕所谓的匿名不是真匿名...

468180
来自专栏AI科技大本营的专栏

如何在浏览器上跑深度学习模型?并且一行JS代码都不用写

翻译 | 林椿眄 编辑 | 周翔 2017 年 8 月,华盛顿大学的陈天奇团队发布了 TVM,和 NNVM 一起组成深度学习到各种硬件的完整优化工具链,支持手机...

39150
来自专栏MelonTeam专栏

UI走查与显示器色彩偏差

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

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

延迟渲染的G-Buffer压缩

20230
来自专栏代码小睿

clicaptcha中文点击验证码开发经验总结

  现在的验证码真是越来越高级了,12306 的找图验证码,极验的拖动式验证码,还有国外的一些黑科技,能智能判断你是不是机器人的验证码。   验证码的更新迭代让...

73290

扫码关注云+社区

领取腾讯云代金券