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

相关文章

来自专栏数据小魔方

图表搬家

来这里找志同道合的小伙伴! 今天给大家聊一聊Excel图表的输出! 我们日常所做的图表,如果不是专门用做Excel报表的话,大部分还是要以图片的形式导出。 通...

3068
来自专栏计算机视觉与深度学习基础

HDU4832

由于水平和竖直相互独立,所以可以分开计数,最后再用组合数算一下,万年老坑long long #include<cstdio> #include<iostream...

19210
来自专栏机器人网

秒懂!十四种阀门的工作原理动图

单向阀 ▼ ? 液动换向阀 ▼ ? 手动换向阀 ▼ ? 三位五通换向阀 ▼ ? 三位四通换向阀 ▼ ? 二位四通换向阀 ▼ ? 二位二通换向阀 ▼ ? 溢流阀...

34710
来自专栏Gaussic

基于特定语料库的TF-IDF关键词提取实现 原

本文旨在对特定的语料库生成各词的逆文档频率。然后根据TF-IDF算法进行关键词提取。

972
来自专栏祝威廉

SQL脚本实现算法模型的训练,预测

搜索团队正好需要计算一些词汇的相似性,这个用Word2Vec是很方便的。于是我立马安排算法团队帮个忙弄下。但回头想想,因为这么点事,打断了算法手头的工作,这简直...

622
来自专栏ml

关于TF(词频) 和TF-IDF(词频-逆向文件频率 )的理解

TF(词频):  假定存在一份有N个词的文件A,其中‘明星‘这个词出现的次数为T。那么 TF = T/N; 所以表示为: 某一个词在某一个文件中出现的频率. T...

2696
来自专栏磐创AI技术团队的专栏

中文文本相似度计算工具集

作者 | fendouai 编辑 | 磐石 出品 | 磐创AI技术团队 ---- 【磐创AI导读】:前两篇文章中我们介绍了一些机器学习不错的项目合集和深度学习入...

5025
来自专栏互联网研发闲思录

个性化推荐系统(八)--- 机器学习深度学习召回集扩量

个性化推荐系统评价有两个重要指标,一个是召回率一个是准确率。召回率就是:召回率=提取正确信息条数/样本中信息条数。准确率就是:准确率=提取出正确信息条数/提取信...

2335
来自专栏企鹅号快讯

6个超实用的AI小工具

? 6个超实用的AI小工具 BGM:鬼火の童・鬼切、虎徹にございます! 今天学习的AI实用小工具,分分钟帮我们提高666倍工作效率,让我们听着这首欢快魔性的小...

2038
来自专栏小詹同学

人脸识别(二)——训练分类器

这是关于人脸的第②篇原创!(源码在第三篇) 上一篇简单整理了下人脸识别的相关基础知识,这一篇将着重介绍利用pencv(2.4.9)已有的模型进行分类器训练。 ...

4249

扫码关注云+社区