阴影 shadow

最新推荐文章于 2022-11-16 10:57:40 发布

Chasidy

最新推荐文章于 2022-11-16 10:57:40 发布

阅读量278

点赞数 2

分类专栏：前端开发 css3 前端知识

本文链接：https://blog.csdn.net/Chasidy/article/details/88659224

版权

前端开发同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

css3

4 篇文章 0 订阅

订阅专栏

前端知识

4 篇文章 0 订阅

订阅专栏

1.1 阴影 shadow

在css3中，阴影分为两种一盘中是盒子阴影，一种是文字阴影

2.1盒子阴影 box-shadow

<style>
.box{
  width: 900px;
  height: 400px;
  margin: 100px auto;
  /* 父项伸缩 */
  display:flex;
}
.box > span{
  flex:4;
  height: inherit;
  border: 1px solid palevioletred;
  transition:box-shadow 2s;
}
</style>

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

2.2语法1

box-shadow:水平偏移垂直偏移模糊值外延值颜色内外阴影

1 水平偏移单位px或者%

2 垂直偏移单位px或者%

3 模糊值控制阴影的模糊程度，值越大越模糊单位px

4 外延值控制阴影向外延伸的值单位px

6 内外阴影可以省略省略值为inset（内阴影） outset(外阴影) 不常用

3.1 语法2

可以对一个盒子添加多个阴影

/*盒子阴影 水平偏移 垂直偏移 模糊值 阴影外延值 颜色 内外阴影?*/
box-shadow:40px 30px 30px red,
		  -30px -30px 20px 5px yellow;

3.2文本阴影 text-shadow

为文本添加阴影效果

<style>
	div{
  		width:200px;
      	 height:200px;
      	background-color:aqua;
      	margin:100px auto;
      	font-size:30px;
        /*文字阴影: 水平偏移 垂直偏移 模糊值 颜色*/
	}
</style>
<body>
	<div>文字阴影</div>
</body>

3.4 语法

文本阴影的属性值比例子阴影的要少两个，少了外延值和内外阴影其他都一样 text-shadow:水平偏移垂直偏移模糊值颜色

Chasidy

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
阴影 shadow

1.1 阴影 shadow在css3中，阴影分为两种一盘中是盒子阴影，一种是文字阴影2.1盒子阴影 box-shadow<style>.box{ width: 900px; height: 400px; margin: 100px auto; /* 父项伸缩 */ display:flex;}.box > span{ flex:4; he...
复制链接

扫一扫