css3更易操作的网页细节-box-shadow阴影

原创 2015年11月18日 14:39:18

box-shadow的参数有六个:X轴偏移、Y轴偏移、阴影模糊半径、阴影扩展半径、阴影颜色、阴影类型。

x-offset:X轴偏移

阴影水平偏移量,其值可以是正负值,如果是正值则阴影在对象的右边,为负值则在左边。

y-offset:Y轴偏移

阴影上下偏移量,其值也可以为正负值,如果是正值,则阴影在对象的底部,为负值则在顶部。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

.box{width:400px; height:400px; border: red solid 2px; margin:auto; box-shadow:20px 20px;}

</style>

</head>


<body>

<div class="box"></div>

</body>

</html>

阴影模糊半径

此参数可选,为0时阴影不具有模糊效果,其值越大阴影边缘也就越模糊

<style>

.box{width:400px; height:400px; border: red solid 2px; margin:auto; box-shadow:20px 20px 30px;}

</style>

阴影扩展半径

此参数可选,其值为正值时,整个阴影面积都延展扩大,为负值时则缩小

<style>

.box{width:400px; height:400px; border: red solid 2px; margin:auto; box-shadow:20px 20px 30px 20px;}

</style>


阴影颜色

此参数可选,如果不设定颜色,浏览器会取默认色,但各个浏览器默认取色不一样

<style>

.box{width:400px; height:400px; border: red solid 2px; margin:auto; box-shadow:20px 20px 30px 20px green;}

</style>


阴影类型

此参数可选,如不设值,默认投影方式是外投影,如取其唯一值“inset”,则投影为内投影

<style>

.box{width:400px; height:400px; border: red solid 2px; margin:auto; box-shadow:20px 20px 30px 20px green inset;}

</style>



版权声明:本文为博主原创文章,未经博主允许不得转载。

css3 box-shadow实例 盒子阴影(翘边阴影,曲线阴影)

做完后效果如下: 上面是曲边阴影,下边是翘边阴影。曲边阴影下部是类似弧线,翘边效果四角旁边翘起阴影。 *{ margin:0; padding: 0; } ul{ list-sty...
  • Christine95
  • Christine95
  • 2015年07月14日 16:28
  • 1950

css3中的box-shadow(阴影)使用说明和兼容性问题

CSS3 box-shadow 属性讲解: box-shadow: h-shadow v-shadow blur spread color inset; h-shadow:阴影水平偏移的距离,...
  • u012250252
  • u012250252
  • 2017年02月18日 21:07
  • 2967

探索 CSS3 中的 box-shadow 属性

挖掘你之前未曾见过的一些应用。 “box-shadow”属性 box-shadow属性是一个CSS3属性,允许我们在几乎任何元素上来创建阴影效果,类似于在设计软件中的”drop shadow”...
  • yeana1
  • yeana1
  • 2016年09月28日 15:57
  • 664

CSS3新特性box-shadow实现多重边框

css3中定义了许多的新特性,极大的丰富了css的表现力。本片博文意在探讨其中的新特性box-shadow。box-shadow语法如下box-shadow: h-shadow v-shadow bl...
  • yk19921114
  • yk19921114
  • 2016年06月09日 00:07
  • 3687

css3阴影box-shadow使用个人笔记

基本语法:box-shadow: inset h-shadow v-shadow blur spread color; inset:可选。将外部阴影 (outset) 改为内部阴影。 h-shado...
  • liuxia666
  • liuxia666
  • 2017年08月02日 10:49
  • 226

【CSS3】关于box-shadow的扩展半径

这个参数很少用到,大部分情况下都省略了,但如果不理解,心里不舒服,所以还是说一下吧。 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];...
  • happyhaojie
  • happyhaojie
  • 2016年02月26日 15:44
  • 940

【CSS3】阴影 box-shadow(一)

box-shadow是向盒子添加阴影。支持添加一个或者多个。 很简单的一段代码,就实现了投影效果,酷毙了。我们来看下语法: box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [...
  • happyhaojie
  • happyhaojie
  • 2015年12月26日 21:04
  • 168

css3 box-shadow 内阴影与外阴影

css3 box-shadow 内阴影与外阴影   1- box-shadow具体使用方法,语法:   E {box-shadow:inset x-offset y-offset blur-...
  • u013149477
  • u013149477
  • 2014年08月29日 11:26
  • 625

使用css3属性时table的box-shadown被覆盖问题

http://q.cnblogs.com/q/52907/
  • jurnlee
  • jurnlee
  • 2014年10月14日 19:11
  • 835

CSS3之元素阴影box-shadow

今天为大家分享CSS3中的box-shadow,这个属性适用于给元素设置阴影的。我们用这个box-shadow属性,可以省去以前遇到阴影就切图的笨方法了。本文将介绍有关box-shadow的一些语法,...
  • LiMengXiaoLong
  • LiMengXiaoLong
  • 2013年09月18日 08:44
  • 3314
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3更易操作的网页细节-box-shadow阴影
举报原因:
原因补充:

(最多只允许输入30个字)