CSS3 实现30种阴影特效

最新推荐文章于 2023-08-31 01:36:26 发布
最新推荐文章于 2023-08-31 01:36:26 发布
阅读量1.2k 收藏 7
点赞数 1
分类专栏： CSS 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44240581/article/details/112794378
版权
效果总览

效果总览

盒子阴影

基本样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影特效</title>
    <style>
        .box {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: rgb(254, 211, 48);
        }
    </style>
</head>
<body>
    <div class="box box-shadow1"></div>
</body>
</html>
阴影1

盒子阴影1

	<style>   
        .box-shadow1{
           box-shadow:
                0 1px 5px rgba(0,0,0,0.25),
                0 0 50px rgba(0,0,0,0.1) inset;
        }
        .box-shadow1:before {
            z-index: -1;
            position: absolute;
            content: "";
            width: 98%;
            height: 96%;
            bottom: 0;
            right: 0;
            background-color: rgb(254, 211, 48);
            border: 1px solid #ccc;
            box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1);
            -webkit-transform: skew(2deg, 2deg) translate(3px, 8px);
            -moz-transform: skew(2deg, 2deg) translate(3px, 8px);
            -ms-transform: skew(2deg, 2deg) translate(3px, 8px);
            -o-transform: skew(2deg, 2deg) translate(3px, 8px);
            transform: skew(2deg, 2deg) translate(3px, 8px);
        }
        .box-shadow1:after {
            z-index: -1;
            position: absolute;
            content: "";
            width: 98%;
            height: 96%;
            bottom: 0;
            right: 0;
            background-color: rgb(254, 211, 48);
            border: 1px solid #ccc;
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
            -webkit-transform: skew(2deg, 2deg) translate(-1px, 2px);
            -moz-transform: skew(2deg, 2deg) translate(-1px, 2px);
            -ms-transform: skew(2deg, 2deg) translate(-1px, 2px);
            -o-transform: skew(2deg, 2deg) translate(-1px, 2px);
            transform: skew(2deg, 2deg) translate(-1px, 2px);
        }
    </style>
阴影2

盒子阴影2

<style>
	.box-shadow2 {
            background-color: rgb(254, 211, 48);
            box-shadow: 
                2px 2px 15px 5px rgba(102,102,102,.6) inset,
                2px 2px 30px 10px rgba(102,102,102,.6) inset,
                2px 2px 45px 15px rgba(102,102,102,.6) inset;
        }
</style>
阴影3

盒子阴影3

<style>
	.box-shadow3 {
            background-color: rgb(254, 211, 48);
            box-shadow:
                5px 5px 0 rgb(200,200,200),
                10px 10px 0 rgb(184,184,184),
                15px 15px 0 rgb(168,168,168),
                20px 20px 0 rgb(200,200,200),
                25px 25px 0 rgb(184,184,184),
                30px 30px 0 rgb(168,168,168);
        }
</style>
阴影4

盒子阴影4

<style>
	.box-shadow4 {
            background-color: rgb(254, 211, 48);
            border-radius: 20px;
            box-shadow:
                inset rgba(0,0,0,.6) 0 -3px 8px,
                inset rgba(252,255,255,.7) 0 3px 8px,
                rgba(0,0,0,.8) 0 3px 8px -3px;

        }
</style>
阴影5

盒子阴影5

<style>
	.box-shadow5 {
            background-color: rgb(254, 211, 48);
            box-shadow: 7px 7px 4px #666;
        }
</style>
阴影6

盒子阴影6

<style>
	.box-shadow6 {
            background-color: rgb(254, 211, 48);
            box-shadow: -7px -7px 4px #666;
        }
</style>
阴影7

盒子阴影7

<style>
	.box-shadow7 {
            background-color: rgb(254, 211, 48);
            box-shadow:
                0 1px 5px rgba(0,0,0,0.25),
                0 0 50px rgba(0,0,0,0.1) inset;
         }
        .box-shadow7:before {
            content: '';
            position: absolute;
            z-index: -1;
            bottom: 8px;
            left: 10px;
            width: 46%;
            height: 20%;
            box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
            -webkit-transform: rotate(-3deg) skew(-0deg);
            -moz-transform: rotate(-3deg) skew(-0deg);
            -ms-transform: rotate(-3deg) skew(-0deg);
            -o-transform: rotate(-3deg) skew(-0deg);
            transform: rotate(-3deg) skew(-0deg);
        }
        .box-shadow7:after {
            content: '';
            position: absolute;
            z-index: -1;
            bottom: 8px;
            right: 10px;
            width: 46%;
            height: 20%;
            box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
            -webkit-transform: rotate(3deg) skew(0deg);
            -moz-transform: rotate(3deg) skew(0deg);
            -ms-transform: rotate(3deg) skew(0deg);
            -o-transform: rotate(3deg) skew(0deg);
            transform: rotate(3deg) skew(0deg);
        }
</style>
阴影8

盒子阴影8

<style>
	.box-shadow8 {
            background-color: rgb(254, 211, 48);
            box-shadow:
                0 1px 5px rgba(0,0,0,0.25),
                0 0 50px rgba(0,0,0,0.1) inset;
        }
        .box-shadow8:before {
            position: absolute;
            left: 80px;
            bottom: 5px;
            width: 100%;
            height: 37%;
            border-radius: 10% 0 0 0;
            z-index: -1;
            content: "";
            box-shadow: -86px 0 17px rgba(0,0,0,0.33);
            -webkit-transform: skew(36deg);
            -moz-transform: skew(36deg);
            -ms-transform: skew(36deg);
            -o-transform: skew(36deg);
            transform: skew(36deg);
            -webkit-transform-origin: 0 100%;
            -moz-transform-origin: 0 100%;
            -ms-transform-origin: 0 100%;
            -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
        }
</style>
阴影9

盒子阴影9

<style>
	.box-shadow9 {
            background-color: rgb(254, 211, 48);
            box-shadow:
                0 1px 5px rgba(0,0,0,0.25),
                0 0 50px rgba(0,0,0,0.1) inset;
        }
        .box-shadow9:before {
            position: absolute;
            right: 80px;
            bottom: 5px;
            width: 100%;
            height: 37%;
            border-radius: 0 10% 0 0;
            z-index: -1;
            content: "";
            box-shadow: 86px 0 17px rgba(0,0,0,0.33);
            -webkit-transform: skew(-36deg);
            -moz-transform: skew(-36deg);
            -ms-transform: skew(-36deg);
            -o-transform: skew(-36deg);
            transform: skew(-36deg);
            -webkit-transform-origin: 0 100%;
            -moz-transform-origin: 0 100%;
            -ms-transform-origin: 0 100%;
            -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
        }
</style>
阴影10

盒子阴影10

<style>
	.box-shadow10 {
            background-color: rgb(254, 211, 48);
            -moz-box-shadow: inset 0 0 10px #666;
            -webkit-box-shadow: inset 0 0 10px #666;
            box-shadow: inset 0 0 10px #666;
        }
</style>
阴影11

盒子阴影11

<style>
	.box-shadow11 {
            background-color: rgb(254, 211, 48);
            box-shadow:
                inset -1px 1px 5px 0 rgba(255,255,255,1),
                8px 18px 7px 0 rgba(50, 50, 50, 0.35),
                -8px 10px 3px 0 rgba(50, 50, 50, 0.4);
        }
</style>
阴影12

盒子阴影12

<style>
	.box-shadow12 {
            background-color: rgb(254, 211, 48);
            -webkit-box-shadow: 40px 4px 10px 0 rgba(102, 102, 102, 0.8);
            -moz-box-shadow: 40px 4px 10px 0 rgba(102, 102, 102, 0.8);
            box-shadow: 40px 4px 10px 0 rgba(102, 102, 102, 0.8);
        }
</style>
阴影13

盒子阴影13

<style>
	.box-shadow13 {
            background-color: rgb(254, 211, 48);
            -webkit-box-shadow: 0 -40px 10px 0 rgba(102, 102, 102, 0.8);
            -moz-box-shadow: 0 -40px 10px 0 rgba(102, 102, 102, 0.8);
            box-shadow: 0 -40px 10px 0 rgba(102, 102, 102, 0.8);
        }
</style>
阴影14

盒子阴影14

<style>
	.box-shadow14 {
            background-color: rgb(254, 211, 48);
            -webkit-box-shadow: 0 40px 10px 0 rgba(102, 102, 102, 0.8);
            -moz-box-shadow: 0 40px 10px 0 rgba(102, 102, 102, 0.8);
            box-shadow: 0 40px 10px 0 rgba(102, 102, 102, 0.8);
        }
</style>
阴影15

盒子阴影15

<style>
	.box-shadow15 {
            background-color: rgb(254, 211, 48);
            -webkit-box-shadow: -40px 0 10px 0 rgba(102, 102, 102, 0.8);
            -moz-box-shadow: -40px 0 10px 0 rgba(102, 102, 102, 0.8);
            box-shadow: -40px 0 10px 0 rgba(102, 102, 102, 0.8);
        }
</style>
阴影16

盒子阴影16

<style>
	.box-shadow16 {
            background-color: rgb(254, 211, 48);
            box-shadow:
                5px 5px 5px 5px rgb(46, 204, 113),
                -5px -5px 5px 5px rgb(52, 152, 219);
        }
</style>
阴影17

盒子阴影17

<style>
	.box-shadow17 {
            background-color: rgb(254, 211, 48);
            box-shadow:
                0 0 0 7px rgb(50, 255, 126),
                0 0 0 14px rgb(126, 255, 245),
                0 0 0 21px rgb(24, 220, 255);
        }
</style>
阴影18

盒子阴影18

<style>
	.box-shadow18 {
            background-color: rgb(254, 211, 48);
            -webkit-box-shadow: 0 0 10px 5px white, 0 0 80px grey, 0 20px 100px black;
            -mox-box-shadow: 0 0 10px 5px white, 0px 0px 80px gray, 0px 20px 100px black;
            box-shadow: 0 0 10px 5px white, 0 0 80px grey, 0 20px 100px black;
        }
</style>

文字阴影

基本样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影特效</title>
    <style>
        .box {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: rgb(254, 211, 48);
        }
    </style>
</head>
<body>
    <div class="box">
        <h1 class="text-shadow1">Hello</h1>
    </div>
</body>
</html>
阴影1

文字阴影1

	<style>
	 .text-shadow1 {
            position: absolute;
            top: 33%;
            left: 30%;
            text-transform: uppercase;
            text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;
        }
	</style>
阴影2

文字阴影2

<style>
	.text-shadow2 {
            position: absolute;
            top: 35%;
            left: 25%;
            text-transform: uppercase;
            text-shadow:
                1px 1px #61b4de,
                2px 2px #61b4de,
                3px 3px #61b4de,
                4px 4px #61b4de,
                5px 5px #61b4de,
                6px 6px #91c467,
                7px 7px #91c467,
                8px 8px #91c467,
                9px 9px #91c467,
                10px 10px #91c467,
                11px 11px #f3a14b,
                12px 12px #f3a14b,
                13px 13px #f3a14b,
                14px 14px #f3a14b,
                15px 15px #f3a14b,
                16px 16px #e84c50,
                17px 17px #e84c50,
                18px 18px #e84c50,
                19px 19px #e84c50,
                20px 20px #e84c50,
                21px 21px #4e5965,
                22px 22px #4e5965,
                23px 23px #4e5965,
                24px 24px #4e5965,
                25px 25px #4e5965;
        }
</style>
阴影3

文字阴影3

<style>
	.text-shadow3 {
            position: absolute;
            top: 35%;
            left: 25%;
            text-transform: uppercase;
            text-shadow:
                3px 0 0 #d91f26,
                6px 0 0 #e25b0e,
                9px 0 0 #f5dd08,
                12px 0 0 #059444,
                15px 0 0 #0287ce,
                18px 0 0 #044d91,
                21px 0 0 #2a1571;
        }
</style>
阴影4

文字阴影4

	<style>
		.text-shadow4 {
		     position: absolute;
		      top: 36%;
		      left: 33%;
		      text-transform: uppercase;
		      text-shadow:
		          0 -0.2em 0.5em rgb(0, 255, 255),
		          0 0.2em 0.5em rgb(255, 0, 0);
	        }
	</style>
阴影5

文字阴影5

<style>
	.text-shadow5 {
            position: absolute;
            top: 37%;
            left: 33%;
            text-transform: uppercase;
            text-shadow: 0 -15px 0 #666;
        }
</style>
阴影6

文字阴影6

<style>
	.text-shadow6 {
            position: absolute;
            top: 37%;
            left: 33%;
            text-transform: uppercase;
            text-shadow:
                0 0 4px #ccc,
                0 -5px 4px #ff3,
                2px -10px 6px #fd3,
                -2px -15px 11px #f80,
                2px -18px 18px #f20;
        }
</style>
阴影7

文字阴影7

<style>
	 .text-shadow7 {
            position: absolute;
            top: 37%;
            left: 33%;
            text-transform: uppercase;
            text-shadow:
                1px 1px 0 #e3e3e3,
                2px 3px 0 #c9c9c9,
                3px 5px 0 #b8b8b8,
                4px 7px 0 #ababab,
                5px 9px 0 #a1a1a1,
                6px 11px 0 #969696,
                0 0 10px rgba(0,0,0,0.15),
                0 4px 10px rgba(0,0,0,0.25),
                0 8px 10px rgba(0,0,0,0.45);
        }
</style>
阴影8

文字阴影8

<style>
	.text-shadow8 {
            position: absolute;
            top: 37%;
            left: 33%;
            color: rgba(0,0,0,0.6);
            text-transform: uppercase;
            text-shadow:
                0 1px 0 #ccc,
                0 2px 0 #c9c9c9,
                0 3px 0 #bbb,
                0 4px 0 #b9b9b9,
                0 5px 0 #aaa,
                0 6px 1px rgba(0,0,0,.1),
                0 0 5px rgba(0,0,0,.1),
                0 1px 3px rgba(0,0,0,.3),
                0 3px 5px rgba(0,0,0,.2),
                0 5px 10px rgba(0,0,0,.25),
                0 10px 10px rgba(0,0,0,.2),
                0 20px 20px rgba(0,0,0,.15);
        }
</style>
阴影9

文字阴影9

<style>
	.text-shadow9 {
            position: absolute;
            top: 37%;
            left: 33%;
            color: rgba(0,0,0,0.6);
            text-transform: uppercase;
            text-shadow:
                0 3px 0 #b2a98f,
                0 14px 10px rgba(0,0,0,0.15),
                0 24px 2px rgba(0,0,0,0.1),
                0 34px 30px rgba(0,0,0,0.1);
        }
</style>
阴影10

文字阴影10

<style>
	.text-shadow10 {
            position: absolute;
            top: 37%;
            left: 33%;
            color: rgba(0,0,0,0.6);
            text-transform: uppercase;
            text-shadow:
                4px 3px 0 #fff,
                9px 8px 0 rgba(0,0,0,0.15);
        }
</style>
阴影11

文字阴影11

<style>
	.text-shadow11 {
            position: absolute;
            top: 37%;
            left: 33%;
            text-transform: uppercase;
            text-shadow:
                0 0 10px #fff,
                0 0 20px #fff,
                0 0 30px #fff,
                0 0 40px #ff00de,
                0 0 70px #ff00de,
                0 0 80px #ff00de,
                0 0 100px #ff00de,
                0 0 150px #ff00de;
        }
</style>
阴影12

文字阴影12

<style>
	.text-shadow12 {
            position: absolute;
            top: 37%;
            left: 33%;
            text-transform: uppercase;
            text-shadow: 20px 21px 14px rgba(150, 150, 150, 1);
        }
</style>

完整代码

码云

等下吃什么？
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3 3D立体阴影文字动画特效
06-11
基于css3 keyframes属性制作的3D立体阴影文字动画特效，也支持中文，只是字体不合适的话，效果没那么好看。
【CSS3】 CSS3实现“图片阴影”效果
O(∩_∩)O
02-24 1万+
学习前端有点类似于学习英语，很多东西需要一点点累积，下面讲解CSS3实现图片阴影效果。 1、实验效果 2、原理分析 3、源程序
CSS3 经典教程系列：CSS3 阴影（text-shadow）详解
weixin_34290631的博客
01-31 161
　　《CSS3 入门教程系列》前一篇文章详细介绍了 border-radius 的用法，今天这篇文章我们在一起来看看 CSS3 中实现圆角效果 text-shadow 属性的具体用法。在以前，阴影效果一般都是做成图片，现在有了 CSS3 可以直接使用 text-shadow 属性来实现阴影。这个属性可以有两个作用，产生阴影和模糊主体。这样在不需要图片的情况下就能给文字增加质感。 您可能感...
23种css3图片阴影效果
07-19
纯CSS3实现的各种阴影效果，无需图片和js代码即可实现图片、按钮等元素的阴影效果，完全通过样式控制阴影大小、方向和深度，经测试效果相当不错非常酷。
CSS3鼠标悬停按钮阴影缩放特效
06-24
CSS3鼠标悬停按钮阴影缩放特效是一款红色简洁的方形按钮，鼠标悬停按钮突出放大阴影效果。
漂亮的CSS阴影动效设计
05-11
提供了一种漂亮美观的按钮、输入框CSS片段，具有扁平化的动画效果。
css3之阴影
chiniue1759的博客
10-11 94
1. 盒子阴影： box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; eg: .box_shadow{ box-shadow:4px 2px 6px 7px #333333 inset; } 同一盒子，可以同时加多个阴影...
CSS3-阴影效果
qq15045846160的博客
03-18 5768
一、给盒子添加阴影。 box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影； 注意： 1、默认情况下是外阴影。 2、阴影扩展是指在原有阴影上继续添加阴影。 3、当box-shadow：水平偏移 垂直偏移 模糊度；时。默认阴影颜色由盒子里面内容颜色决定。 二、给文字添加阴影。 text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色； &lt;!DOCTYPE ht...
css3阴影
流都的博客
06-08 260
-moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; box-shadow:2px 2px 5px #333333;box-shadow:2px 2px 5px rgba(254,215,129,0.4)box-shadow:阴影水平偏移值（可取正负值）| 阴影垂直偏移值 （可取正负值）| 阴影模糊...
css3阴影效果设置
fly18702787810的博客
12-27 925
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> head> style> *{ margin:0; padding:0; } .wrapper{ width:70%; height:200px;
CSS3 3D阴影文字动画特效
07-24
CSS3 3D阴影文字动画特效是一款基于css3 keyframes属性制作3D立体阴影文本动画特效。
css3实现的图片边框阴影特效特效代码
03-20
css3实现的图片边框阴影特效是一款通过css3实现的图片边框阴影特效，该效果全程无js，使用方便。
在css中设计好看的阴影
qq_42880714的博客
08-31 5961
在css中设计好看的阴影
好看的阴影效果css
log_huangxiaoxhe的博客
11-04 251
多种阴影设置
css3阴影属性
Emma946的博客
03-16 3339
CSS3阴影 CSS3 是 CSS 技术的升级版本，CSS3 语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂， 所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、 背景和边框 、文字特效 、多栏布局等。 CSS3的优点： CSS3 将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也...
CSS3--阴影
weixin_30426879的博客
07-15 361
CSS3 之阴影效果 时间：2012年12月18日分类：CSS标签：box-shadow‚CSS3‚text-shadow‚阴影评论：9 对于设计师来说，阴影可以说是一个很常用的效果，它可以直观地突显一个元素，用在网页设计上也非常适合。在 CSS3 阴影效果出现之前，开发者只能通过图片在网页表现阴影，尤其对于阴影文字，使用图片表示是很常见的方式，而在 CSS3...
【青山css】css3阴影效果属性详解及创意玩法
热门推荐
qq_28252421的博客
02-26 2万+
前言 css阴影效果是我们经常使用的一个css属性，但你有仔细了解过它吗？是不是用的时候直接从蓝湖上复制过来就行了，那你了解它的每个参数吗？用阴影又能实现哪些好看的效果呢？来看一看我收集总结的css阴影知识吧，可能不全面，欢迎补充。 属性介绍 语法 box-shadow: x-shadow y-shadow blur spread color inset; x-shadow: 必需的，水平阴影的偏移量，可以为负值，下图表示了在其他参数相同，x-shadow不同情况下的不同表现 box-shadow: x-
CSS3-阴影
07-10 709
1. 文本阴影 text-shadow 可分别设置偏移量、模糊度、颜色(可设透明度)。 ① 水平偏移量 正值向右 负值向左 ② 垂直偏移量 正值向下 负值向上 ③ 模糊度 不能为负值 ④ 阴影的颜色 示例代码1<!DOCTYPE html> <html> <head> <title>设置文本阴影-单个阴影</title> <meta
CSS实现返回顶部功能
weixin_44240581的博客
09-22 2329
CSS实现返回顶部功能
three css3d文本
最新发布
02-18
Three.js是一个基于WebGL的JavaScript 3D库，它提供了一系列的功能和工具，用于创建和渲染3D图形。在Three.js中，CSS3D文本是一种将HTML文本嵌入到3D场景中的技术，可以实现在3D空间中展示和操作HTML文本。 具体来说，CSS3D文本可以通过以下步骤实现： 1. 创建一个HTML元素，例如div，用于包裹要展示的文本内容。 2. 使用CSS样式来设置该HTML元素的位置、大小、颜色等属性，以及透明度、阴影等效果。 3. 使用Three.js的CSS3DRenderer来创建一个CSS3DObject对象，并将该HTML元素作为参数传入。 4. 将CSS3DObject对象添加到场景中，即可在3D空间中展示该HTML文本。 通过使用Three.js的CSS3DRenderer，我们可以在3D场景中实现各种效果，例如旋转、缩放、平移等操作，使得CSS3D文本与其他3D对象进行交互和动画效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值