专栏首页练小习的专栏css单边投影与双侧投影

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

相关文章

  • 一个CSS画的灰太狼,IE下属于重口味,慎看!

    还有几个不错的,比如一个小日本制作的多啦A梦,一个Twitter的当机页面等等,大家可以搜下看看.不得不感叹做前端的哥们闲起来还真是可怕啊.Firefox是正常...

    练小习
  • 转一个css3绘制的iPhone6

    css3绘制的iPhone6 <!DOCTYPE html> <html> <head> <title></title> <style type...

    练小习
  • 伪类以及伪元素的一些使用小技巧

    在浏览器版本越来越高的情况下,很多以前顾及到兼容问题不敢使用的html以及css属性现在已经很普遍的在使用了。比如一些伪类和伪元素。这里稍微提一下在实际工作中用...

    练小习
  • 利用CSS线性渐变、阴影、缩放实现动画下雨效果

    这个动画效果,如果让你来做,你会选择什么方式?相信很多小伙伴都会用gif图片。其实用css实现也很简单。

    Javanx
  • 谈响应式web设计代码实现

    在研究响应式的时候,记录了一些感想,分享出来,抛砖引玉,希望可以和大家一起讨论。总结下来,响应式比之前想象的要复杂得多。 1. ie9以下(不包括ie9)采用i...

    RP道貌不岸然
  • 一个CSS画的灰太狼,IE下属于重口味,慎看!

    还有几个不错的,比如一个小日本制作的多啦A梦,一个Twitter的当机页面等等,大家可以搜下看看.不得不感叹做前端的哥们闲起来还真是可怕啊.Firefox是正常...

    练小习
  • 高质量编码-轨迹管理平台(CSS样式)

    样式仿照百度地图鹰眼轨迹服务早期版本的web端轨迹管理台,地图和UI都使用了夜色风格。

    MiaoGIS
  • 什么? CSS 阴影竟然还有这种骚操作 ?

    关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧(https://www.cnblogs....

    苏南
  • CSS 3.0实现创意点击按钮

    越陌度阡
  • Valine Admin后台搭建(最新修订版)

    Valine Admin 是 Valine 评论系统的扩展和增强,主要实现评论邮件通知、评论管理、垃圾评论过滤等功能。支持完全自定义的邮件通知模板,基于Akis...

    Caleb

扫码关注云+社区

领取腾讯云代金券