css3边框阴影--制作云

最新推荐文章于 2023-08-18 17:31:26 发布

zn0128

最新推荐文章于 2023-08-18 17:31:26 发布

阅读量118

点赞数

文章标签： css3 html5 css

本文链接：https://blog.csdn.net/zn0128/article/details/119985113

版权

本文介绍如何利用CSS3的box-shadow属性来制作逼真的云朵效果，通过调整水平阴影、垂直阴影、模糊距离和阴影尺寸等参数，可以创建出不同形态的云彩。同时提到了inset选项，可用于创建内部阴影效果。

摘要由CSDN通过智能技术生成

利用box-shadow属性制作

语法 box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow：水平阴影的位置，必需 v-shadow：垂直阴影的位置，必需

blur：模糊距离，可选 spread：阴影的尺寸，可选

color：阴影的颜色，可选 inset：将外部阴影 (outset) 改为内部阴影，可选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .sky {
            position: relative;
            width: 500px;
            height: 600px;
            margin: 0 auto;
            bac