Day16-CSS阴影+浮动

最新推荐文章于 2024-07-22 17:10:47 发布

ian燃.

最新推荐文章于 2024-07-22 17:10:47 发布

阅读量462

点赞数 1

分类专栏：工坊打卡前端学习文章标签： css html css3 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_73952430/article/details/128787781

版权

工坊打卡前端学习专栏收录该内容

28 篇文章 0 订阅

订阅专栏

本文介绍了CSS中盒子阴影和文字阴影的使用方法，包括如何设置阴影的各种属性，如水平偏移、垂直偏移、模糊距离等，并展示了如何通过:hover伪类实现交互效果。此外还探讨了浮动的概念及其在网页布局中的应用。

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

盒子阴影

CSS中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。

语法格式：

box-shadow：h-shadow v-shadow blur spread color inset；

h-shadow 负值阴影向左走，正值向右延长

v-shadow 负值阴影向上走，正值向下走

blur 0是纯实的，数值越大越模糊

spread 阴影的尺寸，越大阴影越大

例如

<!DOCTYPE html>
<html lang="zh-CN">

<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>盒子阴影</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3);

        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

注意：

1.默认的是外阴影(outset),但是不可以写这个单词,否则就会导致阴影无效。

2.盒子阴影不占用空间，不会影响其他盒子排列。

如何做出鼠标一放上去就出现阴影？

给盒子添加hover

<!DOCTYPE html>
<html lang="zh-CN">

<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>盒子阴影</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            /* box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3); */

        }

        div:hover {
            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

文字阴影

在CSS3中，我们可以使用text-shadow属性将阴影应用于文本。

语法格式：

text-shadow：h-shadow v-shadow blur spread color；

<!DOCTYPE html>
<html lang="zh-CN">

<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>文字阴影</title>
    <style>
        div {
            font-style: 50px;
            color: orangered;
            font-weight: 700;
            text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <div>文字阴影的效果展示</div>
</body>

</html>

CSS浮动

目标

能够说出为什么需要浮动

能够说出浮动的排列特性

能够说出3种最常见的布局方式

能够说出为什么需要清除浮动

能够说出至少2种清除浮动的方法

能够利用Photoshop实现基本的切图

能够利用Photoshop插件实现切图

能够完成学成在线的页面布局

<!DOCTYPE html>
<html lang="zh-CN">

<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>浮动</title>
    <style>
        .zuo,
        .you {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .you {
            float: right;//把上面的效果层叠掉//
        }
    </style>
</head>

<body>
    <div class="zuo">浮动one</div>
    <div class="you">浮动two</div>
</body>

</html>