【CSS】单边阴影、双边阴影、三边阴影

实现阴影，先来了解一下box-shadow这个属性。

MDN上的定义：box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。

语法：

/ ** 阴影扩散方向｜X 轴偏移量｜Y 轴偏移量｜模糊半径 ｜扩散半径｜颜色 */
box-shadow: [inset] <offset-x> <offset-y> [blur-radius] [spread-radius] [color] ;
/**
注意：当给出两个、三个或四个 <length>值时1、如果只给出两个值，那么这两个值将会被当作 <offset-x><offset-y> 来解释。2、如果给出了第三个值，那么第三个值将会被当作<blur-radius>解释。3、如果给出了第四个值，那么第四个值将会被当作<spread-radius>来解释。
*/

好了，准备工作都做好了，那就直接进入主题吧。

1、单边阴影

具体实现如下：

/** border:1px solid #BFBFBF; *//** 上阴影 */
.top {box-shadow: 0px -3px 3px -2px #aaa;
}
/** 右阴影 */
.right {box-shadow: 3px 0 3px -2px #aaa;
}
/** 下阴影 */
.bottom {box-shadow: 0px 3px 3px -2px #aaa;
}
/** 左阴影 */
.left {box-shadow: -3px 0 3px -2px #aaa;
}

效果如图：

2、双边阴影

具体实现如下：

/** 右上阴影 */
.right-top {box-shadow: 3px -3px 3px -2px #aaa;
}
/** 右下阴影 */
.right-bottom {box-shadow: 3px 3px 3px -2px #aaa;
}
/** 左下阴影 */
.left-bottom {box-shadow: -3px 3px 3px -2px #aaa;
}
/** 左上阴影 */
.left-top {box-shadow: -3px -3px 3px -2px #aaa;
}
/** 上下阴影 */
.top-bottom {/** 上阴影+下阴影 */box-shadow: 0px -3px 3px -2px #aaa, 0px 3px 3px -2px #aaa;
}
/** 左右阴影 */
.left-right {/** 左阴影+右阴影 */box-shadow: -3px 0 3px -2px #aaa, 3px 0 3px -2px #aaa;
}

效果如图：

3、三边阴影

上面的上下阴影和左右阴影，是通过结合实现的，那么三边阴影也是一样的方式即可。
具体实现如下：

/** 无上阴影 */
.no-top {/** 左下阴影+右下阴影 */box-shadow: -3px 3px 3px -2px #aaa, 3px 3px 3px -2px #aaa;
}
/** 无右阴影 */
.no-right {/** 左上阴影+左下阴影 */box-shadow: -3px -3px 3px -2px #aaa, -3px 3px 3px -2px #aaa;
}
/** 无下阴影 */
.no-bottom {/** 左上阴影+右上阴影 */box-shadow: -3px -3px 3px -2px #aaa, 3px -3px 3px -2px #aaa;
}
/** 无左阴影 */
.no-left {/** 右上阴影+右下阴影 */box-shadow: 3px -3px 3px -2px #aaa, 3px 3px 3px -2px #aaa;
}

效果如图：

到这里，关于阴影的部分就差不多啦，如果要实现全阴影，偏移量设置为0，设置模糊半径即可。

欢迎大家一起学习交流呀！

【CSS】单边阴影、双边阴影、三边阴影相关推荐

html盒子产生阴影,css给一个盒子加盒阴影的方法
css给一个盒子加盒阴影的方法发布时间:2020-11-16 10:57:56 来源:亿速云阅读:171 作者:小新这篇文章主要介绍了css给一个盒子加盒阴影的方法,具有一定借鉴价值,需要的朋友 ...
10 CSS盒子模型+圆角边框+盒子阴影+文字阴影
1. 盒子模型 1.1 看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容. 网页布局的 ...
Web前端，CSS背景图片大小、文字阴影、盒子阴影、过渡
前言持续学习总结输出中,今天分享的是Web前端,CSS背景图片大小.文字阴影.盒子阴影.过渡背景图片大小 background-size:宽度高度; 设置背景图片的大小取值场景数字+px ...
html中图片阴影怎么写,css怎么在图片上加阴影？
css怎么在图片上加阴影?下面本篇文章给大家介绍一下使用CSS在图片上加阴影的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 方法1:设置box-shadow属性 box-sh ...
css 一条线加阴影,CSS3实现曲线阴影和翘边阴影
html> CSS3实现曲线阴影和翘边阴影 /*源于imooc的学习*/ body { font-family: "微软雅黑", "Microsoft YaHei& ...
css如何给盒子底部加阴影,CSS3 --添加阴影（盒子阴影、文本阴影的使用）
CSS3 - 给div或者文字添加阴影(盒子阴影.文本阴影的使用) CSS3定义了两种阴影:盒子阴影和文本阴影.其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本.下面分别介绍两种 ...
html页面下的阴影,html5/css3文本阴影(text-shadow)详解及示例
text-shadow属性用于设置文本内容的阴影效果或模糊效果.目前,text-shadow属性已经得到Safari浏览器.Firefox浏览器.Chrome浏览器和Opera浏览器的支持.IE8版本 ...
html内部阴影效果图,boxshadow内部阴影
box-shadow哪个属性值是去掉阴影的基本用法,你看看 (1)投影,没有位移,没有扩展,有阴影,有阴影色彩 img{box-shadow:0 0 10px #ccc} (2)投影,没有位移,有扩 ...
Unity Shader: 理解Stencil buffer并将它用于一些实战案例（描边，多边形填充，反射区域限定，阴影体shadow volume阴影渲染）
本文示例项目Github连接:https://github.com/liu-if-else/UnityStencilBufferUses 最近有两次被人问到stencil buffer的用法,回答的含 ...

【CSS】单边阴影、双边阴影、三边阴影

1、单边阴影

2、双边阴影

3、三边阴影

【CSS】单边阴影、双边阴影、三边阴影相关推荐

最新文章

热门文章