【CSS】盒子模型阴影 ( box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内外阴影; )
CSS 模型 颜色 模糊 水平 距离 垂直 尺寸
2023-06-13 09:17:40 时间
文章目录
一、盒子模型阴影
盒子模型阴影 使用 如下 属性设置 :
box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内外阴影;
只有 前两个阴影 , 水平阴影 和 垂直阴影 必须写 , 后面的四个值可以省略 ;
1、标准阴影示例
标准的阴影代码 :
/* box-shadow: 水平阴影 垂直阴影
模糊距离 阴影尺寸 阴影颜色 内外阴影;*/
box-shadow: 2px 2px 2px 2px black;
展示效果 :
2、水平阴影示例
水平阴影代码 : 只修改第一个属性值 ;
/* box-shadow: 水平阴影 垂直阴影
模糊距离 阴影尺寸 阴影颜色 内外阴影;*/
box-shadow: 20px 2px 2px 2px black;
展示效果 :
水平阴影代码2 : 只修改第一个属性值 ;
/* box-shadow: 水平阴影 垂直阴影
模糊距离 阴影尺寸 阴影颜色 内外阴影;*/
box-shadow: -20px 2px 2px 2px black;
展示效果 :
3、垂直阴影示例
垂直阴影代码 : 只修改第二个属性值 ;
/* box-shadow: 水平阴影 垂直阴影
模糊距离 阴影尺寸 阴影颜色 内外阴影;*/
box-shadow: 2px 20px 2px 2px black;
展示效果 :
垂直阴影代码2 : 只修改第二个属性值 ;
/* box-shadow: 水平阴影 垂直阴影
模糊距离 阴影尺寸 阴影颜色 内外阴影;*/
box-shadow: 2px -20px 2px 2px black;
展示效果 :
5、模糊距离示例
模糊距离代码 : 只修改第三个属性值 ;
/* box-shadow: 水平阴影 垂直阴影
模糊距离 阴影尺寸 阴影颜色 内外阴影;*/
box-shadow: 2px 2px 20px 2px black;
展示效果 :
模糊距离代码2 : 只修改第三个属性值 ;
/* box-shadow: 水平阴影 垂直阴影
模糊距离 阴影尺寸 阴影颜色 内外阴影;*/
box-shadow: 2px 2px -20px 2px black;
展示效果 : 该值只能大于等于 0 ;
6、阴影尺寸示例
阴影尺寸示例代码 : 只修改第四个属性值 ;
/* box-shadow: 水平阴影 垂直阴影
模糊距离 阴影尺寸 阴影颜色 内外阴影;*/
box-shadow: 2px 2px 2px 20px black;
展示效果 :
7、阴影颜色示例
阴影颜色示例代码 : 只修改第五个属性值 ;
/* box-shadow: 水平阴影 垂直阴影
模糊距离 阴影尺寸 阴影颜色 内外阴影;*/
box-shadow: 2px 2px 2px 2px blue;
展示效果 :
8、内外阴影示例
内外阴影示例代码 : 只修改第六个属性值 ; 如果设置外阴影 , 不需要写第六个值 , 就是默认状态 , 写了就错了 ;
/* box-shadow: 水平阴影 垂直阴影
模糊距离 阴影尺寸 阴影颜色 内外阴影;*/
box-shadow: 2px 2px 2px 2px black;
展示效果 :
内外阴影示例代码 : 只修改第六个属性值 ; 如果设置内阴影 , 第六个属性值设置 inset ;
/* box-shadow: 水平阴影 垂直阴影
模糊距离 阴影尺寸 阴影颜色 内外阴影;*/
box-shadow: 2px 2px 2px 2px black inset;
展示效果 : 该写法几乎不用 ;
二、常用代码示例
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>盒子模型阴影</title>
<style type="text/css">
/* 清除标签默认的内外边距 */
* {
padding: 0;
margin: 0;
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 盒子垂直居中 */
margin: 50px auto;
/* box-shadow: 水平阴影 垂直阴影
模糊距离 阴影尺寸 阴影颜色 内外阴影;*/
box-shadow: 0 15px 30px rgba(0,0,0,.3);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
显示效果 :
相关文章
- css滚动条样式修改_js设置滚动条样式
- css规则定义的分类,CSS规则定义英汉对照表[通俗易懂]
- 前端面试CSS相关(二)
- 【说站】css盒子模型的属性介绍
- 【说站】css中skew函数的使用
- css面试点一:盒模型详解+遗漏点
- css面试点四:css3弹性盒子模型-flex布局详解
- CSS媒体查询_css网页
- CSS的Backdrop Filter妙用
- 寒假提升 | Day10 CSS 第八部分
- 【CSS】标签显示模式 ② ( 行内元素 | 行内块元素 )
- 【CSS】盒子模型内边距 ② ( 内边距复合写法 | 代码示例 )
- 【CSS】盒子模型内边距 ④ ( 盒子模型内部尺寸计算 - 内容尺寸、内边距、边框宽度 | 盒子模型尺寸 = 内容尺寸 + 内边距 + 边框宽度 )
- 【CSS】盒子模型外边距 ③ ( 插入图片 | 插入图片位置移动 - 修改外边距 | 背景图片 | 背景图片移动位置 - 修改背景位置 background-position )
- 【CSS】课程网站 网格商品展示 模块制作 ② ( 网格商品展示盒子模型测量及样式 | 处理列表间隙导致意外换行问题 | 代码示例 )
- 【CSS】课程网站网页底部开发 ( 网页底部盒子模型测量及样式 | 代码示例 )
- CSS 盒模型与box-sizing详解编程语言
- HTML&CSS精选笔记_CSS入门详解编程语言
- CSS权威指南-第三版–读书笔记详解编程语言
- CSS Box Model(盒子模型)详解编程语言
- CSS 对齐样式
- CSS如何影响MySQL的使用(css影响MySQL)
- CSS与MySQL合力提升网页性能(css与mysql结合)
- MySQL登陆系统CSS实现一键登录(css mysql登陆)
- Class与ID区别margin和padding区别CSS学习笔记
- CSS教程之css选择器、属性、值
- JS实现标签页效果(配合css)
- JS判断移动端访问设备并加载对应CSS样式
- JavaScript和CSS交互的方法汇总