CSS阴影效果(Box-shadow)用法趣味讲解

使用Box-shadow属性表现阴影效果是现代浏览器中是一个非常有用的技巧，通过它我们可以做出很多非常酷的东西。让我们来一步一步的了解box-shadow属性的基本用法，然后进一步了解::before和::after伪元素的用法。

基本用法

box-shadow:2px 2px 5px #000;

box-shadow:0px 0px 10px #000;

内阴影

box-shadow:inset 2px 2px 5px #000;

阴影扩展长度值

box-shadow:0px 0px 5px 10px #000;

box-shadow:0px 15px 10px -15px #000;

box-shadow:inset 0px 15px 10px -15px #000;

多重阴影

box-shadow:0px 0px 0px 3px #bb0a0a,0px 0px 0px 6px #2e56bf,0px 0px 0px 9px #ea982e;

伪元素`::before`和`::after`的乐趣

使用伪元素::before和::after，我们能创造出非常逼真的只有图片才能实现的阴影效果。让我来看一个例子：

<div class="box11 shadow"></div>

.box11 {width: 300px;height: 100px;background: #ccc;border-radius: 10px;margin: 10px;
}.shadow {position: relative;max-width: 270px;box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0px 0px 20px rgba(0,0,0,0.1) inset;
}.shadow::before,
.shadow::after {content:"";position:absolute;z-index:-1;
}.shadow::before,
.shadow::after {content:"";position:absolute;z-index:-1;bottom:15px;left:10px;width:50%;height:20%;
}.shadow::before,
.shadow::after {content:"";position:absolute;z-index:-1;bottom:15px;left:10px;width:50%;height:20%;box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);transform:rotate(-3deg);
}.shadow::after{right:10px;left:auto;transform:rotate(3deg);}

CSS阴影效果(Box-shadow)用法趣味讲解相关推荐

html5 头部阴影,兼容各种主流浏览器的CSS阴影效果
CSS阴影效果(Box shadows)应用在Web页面设计上已经有了一段时间了.之前在CSS2阶段阴影效果还不是很有效之时,大部分的这种效果都是使用Photoshop图片实现的,但对于一些缺乏这些绘 ...
html兄弟选择器怎么用,CSS的相邻兄弟选择器用法示例讲解
对于有相同父元素的相邻HTML元素查找便可以使用CSS的相邻兄弟选择器,这里我们就来看一下CSS的相邻兄弟选择器用法简单讲解: 可选择紧接在另一个元素后的元素,且二者有相同的父级元素下面代码中,it ...
CSS Box Shadow Bottom Only [复制]
本文翻译自:CSS Box Shadow Bottom Only [duplicate] This question already has an answer here: 这个问题在这里已有答案: ...
html nthchild作用,详解CSS中:nth-child的用法
前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是":nth-child". 下面我将用几个典型的实例来给大家讲解:nt ...
css零到一高级教程007：CSS 阴影效果
CSS 阴影效果通过使用 CSS,您可以在文本和元素上添加阴影. 在我们的教程中,您将学习如下属性: text-shadow box-shadow CSS 文字阴影 CSS text-shadow ...
在线生成CSS阴影效果工具
背景在写前端时经常会用到CSS阴影效果,为了提高效率,可以借助这个在线小工具快速创建阴影,并且可以设置层级,在线调节好,可以直接复制CSS代码. https://lingdaima.com/shad ...
css中hideFocus的用法
css中hideFocus的用法简单说:hideFocus是对超链接外虚线框的设定! hideFocus即隐藏聚焦,具有使对象聚焦失效的功能,其功能相当于: onFocus="this.b ...
html中投影效果图,利用CSS3（box shadow）制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
Android webservice的用法详细讲解
Android webservice的用法详细讲解看到有很多朋友对WebService还不是很了解,在此就详细的讲讲WebService,争取说得明白吧.此文章采用的项目是我毕业设计的webserv ...

CSS阴影效果(Box-shadow)用法趣味讲解

基本用法

内阴影

阴影扩展长度值

多重阴影

伪元素`::before`和`::after`的乐趣

CSS阴影效果(Box-shadow)用法趣味讲解相关推荐

最新文章

热门文章

CSS阴影效果(Box-shadow)用法趣味讲解

基本用法

内阴影

阴影扩展长度值

多重阴影

伪元素::before和::after的乐趣

CSS阴影效果(Box-shadow)用法趣味讲解相关推荐

最新文章

热门文章

伪元素`::before`和`::after`的乐趣