【box-shadow盒子内边阴影外阴影】

box-shadow属性

用于设置盒子阴影效果

盒子外阴影

box-shadow：[左右阴影偏移距离(px)] [上下阴影偏移距离(px)] [模糊程度(px)] [模糊距离(px)] [颜色]

[左右阴影偏移距离(px)] ---- 正数-阴影偏向盒子右端，负数-阴影偏向盒子左端
[上下阴影偏移距离(px)] ---- 正数-阴影偏向盒子下端，负数-阴影偏向盒子上端
[模糊程度(px)] ---- 数值越大-表示盒子阴影的模糊程度越高，负数-阴影模糊程度越小
[模糊距离(px)] ---- 数值越大-模糊的范围就越大
[颜色] ---- 设置模糊颜色

 #box {width: 100px;height: 100px;margin: 100px;border: 1px solid #ccc;box-shadow: 10px 10px 10px 10px #ccc;}

box-shadow内边阴影

 {box-shadow://对应盒子上内边阴影，第一个值为左右偏移，第二个为上下偏移inset 0 5px white,//对应盒子右内边阴影，第一个值为左右偏移，第二个为上下偏移inset 0 -5px #ccc,//对应下内边阴影，第一个值为左右偏移，第二个为上下偏移inset -5px 0 #d7d7d7,//对应做内边阴影，第一个值为左右偏移，第二个为上下偏移inset 5px 0 #d7d7d7;}

第三个值表示对应边的阴影颜色
有顺序要求，新设置的阴影会盖在后设置阴影上面

—— 例

 width: 120px;height: 120px;margin: 0 16px;padding: 10px 5px;box-sizing: border-box;list-style: none;border-radius: 10%;box-shadow:inset 0 5px white,inset 0 -5px #ccc,inset -5px 0 #d7d7d7,inset 5px 0 #d7d7d7;background-color: #e7e7e7;

【box-shadow盒子内边阴影外阴影】相关推荐

css3 box-shadow阴影(外阴影与外发光)讲解
基础说明: 外阴影:box-shadow: X轴 Y轴 Rpx color; 属性说明(顺序依次对应): 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影 ...
Box Shadow阴影和圆角
一.盒子写Box Shadow阴影:如 box-shadow:2px 2px 5px #120F0B; //支持Opera浏览器 -moz-box-shadow:2px 2px 5px #120F0B ...
Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...
Box Shadow(阴影)-Css3写法示例
Box Shadow(阴影)-Css3演示 -moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; b ...
CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影
本篇文章为 CSS 基础系列笔记第三篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
CSS盒子模型/PS基操/圆角边框/盒子阴影/文字阴影/案例
CSS 03 1. 盒子模型 1.1 看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容 ...
10 CSS盒子模型+圆角边框+盒子阴影+文字阴影
1. 盒子模型 1.1 看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容. 网页布局的 ...
CSS3 box-shadow 效果大全（内阴影，外阴影，三边阴影，双边阴影，单边阴影，细线描边…）...
CSS3 box-shadow 属性用来描述一个元素的一个或多个阴影效果,该属性几乎可以让你完成你想要的任何阴影效果.然而 box-shadow 属性语法和取值非常灵活,对于新手有点不容易理解.今天总 ...
CSS3 box-shadow 效果大全（内阴影，外阴影，三边阴影，双边阴影，单边阴影，细线描边…）
CSS3 box-shadow 属性用来描述一个元素的一个或多个阴影效果,该属性几乎可以让你完成你想要的任何阴影效果.然而 box-shadow 属性语法和取值非常灵活,对于新手有点不容易理解.今天总 ...

【box-shadow盒子内边阴影外阴影】

box-shadow属性

盒子外阴影

box-shadow内边阴影

【box-shadow盒子内边阴影外阴影】相关推荐

最新文章

热门文章