CSS 基础
取值单位
外观样式
布局样式
动画样式
工具与规范
实例练习
box-shadow
属性用以设置元素的样式效果。
box-shadow
属性值由以下的值组成。
- inset:默认值为外部,设置了
inset
属性值则阴影在元素内部,没设置则在外部。 - x 偏移量、 y 偏移量:默认值为 0, 设置元素在 x 与 y 轴上的偏移量。
- 模糊半径:默认值为 0, 值越大则阴影的模糊面积越大。
- 扩散半径:默认值为 0, 值越大则阴影的面积越大,默认与元素面积一样大。
- 颜色:默认为黑色(#000)。
语法如下:
/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;
/* 任意数量的阴影,以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
长度数值的规则:
- 两个长度值:x 的偏移量 | y 的偏移量。
- 三个长度值:x 的偏移量 | y 的偏移量 | 模糊半径。
- 四个长度值:x 的偏移量 | y 的偏移量 | 模糊半径 | 扩散半径。
<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/QWOPWyy?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
练习
- 完成以下的实例。
$$demo
<div class="box">三眼鸭的编程教室</div>
<style> .box { display: inline-block; font-size: 14px; border: 2px solid #333; padding: 10px 20px; box-shadow: 8px 8px teal; } </style>
$$
$$answer
<div class="box">三眼鸭的编程教室</div>
<style>
.box {
display: inline-block;
font-size: 14px;
border: 2px solid #333;
padding: 10px 20px;
box-shadow: 8px 8px teal;
}
</style>
$$
- 完成以下的实例。
$$demo <div class="box">三眼鸭的编程教室</div>
<style> .box { display: inline-block; font-size: 14px; padding: 10px 20px;
background-color: beige;
box-shadow: -8px -8px red, 8px 8px orange,
0 0 0 8px blue;
}
</style> $$
$$answer
<div class="box">三眼鸭的编程教室</div>
<style>
.box {
display: inline-block;
font-size: 14px;
padding: 10px 20px;
background-color: beige;
box-shadow: -8px -8px red, 8px 8px orange,
0 0 0 8px blue;
}
</style>
$$