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

相关文章

来自专栏全沾开发(huā)

总结CSS3新特性(Transform篇)

总结CSS3新特性(Transform篇) 概述: CSS3新添加的Transform可以改变元素在可视化区域的坐标(这种改变不会引起...

3227
来自专栏华章科技

学习R语言,一篇文章让你从懵圈到入门

PivotalR:用于读取Pivitol(Greenplum)和HAWQ数据库中的数据

602
来自专栏java一日一条

Android性能优化案例研究(上)

这是Google的Android开发工程师Romain Guy刊登在个人Blog上的一篇文章。Romain Guy 作为Android图形渲染和系统优化的专家,...

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

学习R语言,一篇文章让你从懵圈到入门

在实际工作中,每个数据科学项目各不相同,但基本都遵循一定的通用流程。具体如下: 数据科学工作流程 数据导入 数据整理 反复理解数据 数据可视化 数据转换 ...

3204
来自专栏前端儿

无主之地1

子晓最近在玩无主之地1,他对这个游戏的评价不错,结合了FPS与RPG元素,可玩度很高。不过,他发现了一代的任务系统做的不好,任务系统并没有帮他统计清楚哪个区域有...

702
来自专栏AI研习社

一次 PyTorch 的踩坑经历,以及如何避免梯度成为NaN

本文首发于知乎答主小磊在「PyTorch有哪些坑/bug?」下的回答,AI 研习社获原作者授权转载。 分享一下我最近的踩坑经历吧。 这几天在实现一个语义分割的 ...

4886
来自专栏机器学习算法原理与实践

英文文本挖掘预处理流程总结

    在中文文本挖掘预处理流程总结中,我们总结了中文文本挖掘的预处理流程,这里我们再对英文文本挖掘的预处理流程做一个总结。

452
来自专栏阿凯的Excel

甘特图绘制(Excel绘制图表系列课程)!

谈到甘特图,很多人最先想到的是项目经理,想到项目经理,最先想到的就是 嗯!这两个字就是形容包括我在内的所有项目管理人员的! 回归正轨,是这样的,项目经理呢,...

2636
来自专栏机器之心

教程 | 如何优雅而高效地使用Matplotlib实现数据可视化

2685
来自专栏IMWeb前端团队

如何使用 CSS Grid 布局 IOS11 新的控制中心

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 昨天 IOS11 就可以开始安装更新了,下图就是它带来的新的控制中心界面,是...

1786

扫码关注云+社区