html5中box-shadow,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，我们能创造出非常逼真的只有图片才能实现的阴影效果。让我来看一个例子：

.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);

}

(英文：SS Box Shadow Property – The Basics and Fun Stuff.)

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

Html5中的徽章,CSS 常见样式特殊用法贯穿线徽章箭头
### 贯穿渐变线,中间插值 - 如图: > ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190427200554843.png) ![在这里插入图片描 ...
HTML5中拖动功能的添加属性,html5中可拖动dragable属性及其他成员的讲解
html5中可拖动dragable属性及其他成员的讲解发布时间:2020-04-22 11:08:02 来源:亿速云阅读:350 作者:小新这篇文章主要为大家详细介绍了html5中可拖动drag ...
css 文字可选,在HTML5中如何使用CSS建立不可选的文字
下面的例子展示了在HTML5中你如何使用CSS建立不可选的文字. Creating non-selectable text using CSS div { margin-bottom: 20px; p ...
html5中怎么让文字旋转动画效果图,HTML5中实现的CSS 3D文字旋转动画
一个基于HTML5的网页文字3D旋转动画效果,支持中文和英文字符,浏览请注意要使用支持CSS3技术的浏览器,比如Opera.Chrome等,主要结合transition 和 animation来实现, ...
CSS阴影效果(Box-shadow)用法趣味讲解
分享: 使用Box-shadow属性表现阴影效果是现代浏览器中是一个非常有用的技巧,通过它我们可以做出很多非常酷的东西.让我们来一步一步的了解box-shadow属性的基本用法,然后进一步了解::be ...
html5中comment注释咋用,comment的用法总结大全
comment的意思 n. 评论:注释:意见:说明 vt.& vi. 评论,谈论: vt. 表达意见:解释,注释: vi. 作注释:作注解:作解释:作评语 comment的用法 comment ...
html5 头部阴影,兼容各种主流浏览器的CSS阴影效果
CSS阴影效果(Box shadows)应用在Web页面设计上已经有了一段时间了.之前在CSS2阶段阴影效果还不是很有效之时,大部分的这种效果都是使用Photoshop图片实现的,但对于一些缺乏这些绘 ...
html中aside怎么调整位置,HTML5中的aside标签怎么用？HTML5aside侧边栏的具体使用方法你知道吗？...
HTML5中的aside标签怎么用?HTML5aside侧边栏的具体使用方法你知道吗?本篇文章主要讲解了HTML5中的aside标签的定义和用法,还有HTML5中aside元素的详解和注意事项. HT ...
Box Shadow CSS教程–如何向任何HTML元素添加投影
We can add a drop shadow to any HTML element using the CSS property box-shadow. Here's how. 我们可以使用CS ...
html5 box sizing,CSS 盒模型与box-sizing
一.盒模型一个web页面由许多html元素组成,而每一个html元素都可以表示为一个矩形的盒子,CSS盒模型正是描述这些矩形盒子的存在. MDN的描述: When laying out a docu ...

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

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

最新文章

热门文章