0 0 3 3 - Shadow之块状元素阴影

不二如是 · 发表于 2017-1-26 19:34:21

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2021-8-11 09:23 编辑

32完成了文字元素的添加，现在看下块状元素怎么玩

看下代码：

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
                
        </style>
</head>
<body>
        <div class="box">
                <h1>块状元素</h1>
        </div>
</body>
</html>

效果图，啥也没有：

添加box-shadow属性：

<style type="text/css">
                .box{
                        width: 199px;
                        height: 199px;
                        background: #FFF;
                        box-shadow: 11px 11px 11px rgba(0,0,0,.5);
                }
                        </style>

效果图：

box-shadow和text-shadow，前4个属性值一样：

第一个阴影横向右移11px、向下移动11px、阴影模糊大小11px、黑色阴影50%透明度

当然如果都一样，就没必要再搞一个box-shadow属性了

box-shadow还有两个可选参数：

第四位，spread，阴影尺寸；

最后一位，inset（默认outset），阴影由外转内；

先来看，spread：

box-shadow: 11px 11px 11px 33px rgba(0,0,0,.5);

效果图：

inset：

box-shadow: 11px 11px 11px 33px rgba(0,0,0,.5) inset;

效果图：

实在有些难看，现在添加点精细质感设计：

除了添加div居中，修改字体，添加广告。

最重要引入圆角变，低透明度的阴影，代码如下：

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
                body{
                        text-align: center;
                }
                .box{
                        margin: 0 auto;
                        width: 300px;
                        height: 300px;
                        background:#FFF;
                        border-radius:5px;
                        box-shadow: 0 1px 2px 11px rgba(0,0,0,.15);
                }
                        </style>
                
</head>
<body>
        <div class="box">
                <h1><font face="verdana">鱼C工作室</font></h1>
                <p><font size="6" face="arial" color="#F4A">让编程改变世界</font></p>
                <p align="right"><font size="3" face="NSimSun" color="#888"><b>在下不二如是,失敬失敬</b></font></p>
        </div>
</body>
</html>

效果图：

游客，如果您要查看本帖隐藏内容请回复

这位鱼油，如果喜欢本帖子，请订阅专辑-->（传送门）（不喜欢更要订阅

）

官方 Web 课程：

joker11111 · 发表于 2017-3-27 23:39:13

本帖最后由 joker11111 于 2017-3-27 23:40 编辑

交作业啦啦啦啦啦

创意不是自己的，W3C上的，有种拍立得照片墙的赶脚，没想到块状阴影还能干这个，amazing!同时还复习了css的框模型，哈哈哈

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <style type="text/css"> 
                        body
                        {
                                margin:30px;
                                background-color:#E9E9E9;
                                text-align: center;
                        }

                        div.polaroid
                        {
                                width:294px;
                                padding:10px 10px 20px 10px;
                                border:1px solid #BFBFBF;
                                background-color:white;
                                /* Add box-shadow */
                                box-shadow:2px 2px 3px #aaaaaa;
                        }

                        .rotate_left
                        {
                                float:left;
                                transform:rotate(7deg);
                        }

                        .rotate_right
                        {
                                float:left;
                                transform:rotate(-8deg);
                        }
                </style>
        </head>
<body>

<div class="polaroid rotate_left">
<img src="1.jpg" width="284" height="213" />
<p class="caption">泛黄的老照片，如老酒般醇香</p>
</div>

<div class="polaroid rotate_right">
<img src="2.jpg" width="284" height="213" />
<p class="caption">手艺人</p>
</div>


</body>
</html>

shishunfu · 发表于 2017-4-26 15:36:48

交作业

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>块状元素阴影（box - shadow）</title>
        <style>
                body
                {
                        margin: 100px;
                        background-color:beige;
                }
                div.polaroid
                {
                        width:294px;
                        padding:10px 10px 20px 10px;
                        border:1px solid #BFBFBF;
                        background-color:white;
                        border-radius:5px;
                        box-shadow: 2px 2px 2px 20px #aaaaaa;
                }
                .rotate_left{
                        float: left;
                        transform:rotate(8deg);
                }
                .rotate_right{
                        float: left;
                        transform:rotate(-8deg);
                }
        </style>
</head>
<body>
<div class="polaroid rotate_left">
        <img src="eg_cute.gif" alt="动态图片"  />
        <p class="caption">gif图</p>
</div>

<div class="polaroid rotate_right">
        <img src="b1.jpg" alt="美女"  />
        <p class="caption">静态图片</p>
</div>

</body>
</html>

a540656809 · 发表于 2017-3-6 14:45:27

看w3school容易睡觉，看楼主的像看段子一样。。也是6的很

不二如是 · 发表于 2017-3-6 14:57:20

a540656809 发表于 2017-3-6 14:45
看w3school容易睡觉，看楼主的像看段子一样。。也是6的很

哈哈，好样儿的～

163areocraft · 发表于 2017-3-7 16:54:22

谢谢分享。

dreamdnj · 发表于 2017-3-28 17:28:58

效果很好看！！

wei_Y · 发表于 2017-3-29 19:41:45

从此也是有影子的人了，不，块儿了。

逢源try一try · 发表于 2017-5-12 11:54:52

学习一下

apprenticeyy · 发表于 2017-6-9 09:08:02

看看

ganglianhuo2 · 发表于 2017-7-6 14:14:12

非常好

aswyamato1989 · 发表于 2017-7-19 03:11:05

回复看帖

aswyamato1989 · 发表于 2017-7-19 03:22:43

交作业！

R9bot · 发表于 2018-3-15 22:19:35

好多地方的术语看的有点懵

likesunshine · 发表于 2018-3-22 17:38:16

效果图

rock5442107 · 发表于 2018-6-13 21:31:01

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>033</title>
        <style type="text/css">
                .box{
                        margin: 0 auto;
                        width:300px;
                        height:300px;
                        background:#FFF;
                        border-radius:5px;
                        box-shadow:0 1px 2px 11px rgba(0,0,0,.15);
                }
                body{
                        text-align:center;
                }

        </style>
</head>
<body>
        <div class="box">
                <h1><font face="verdana">魚C工作室</font></h1>
                <p><font size="6" face="arial" color="#F4A">讓編程改變世界</font></p>
                <p align="right"><font size="3" face="NSimSum" color="#888"><b>在下Ciprino，失敬失敬</b></font></p>
        </div>
</body>
</html>

floride · 发表于 2018-8-2 20:51:49

a211827754 · 发表于 2018-8-22 16:13:12

好好看好好学

船到桥头自然沉 · 发表于 2018-9-10 21:27:38

soulwyb · 发表于 2018-10-22 23:56:17

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>33</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        body {
            text-align: center;
        }
        
        .box {
            margin: 0 auto;
            width: 300px;
            height: 300px;
            background: #fff;
            border-radius: 5px;
            /* box-shadow: 11px 11px 11px 33px rgba(0, 0, 0, .5) inset; */
            box-shadow: 0 1px 2px 11px rgba(0, 0, 0, .15);
        }
    </style>
</head>

<body>
    <div class="box">
        <h1>
            <font face="verdana">鱼C工作室</font>
        </h1>
        <p>
            <font size="6" face="arial" color="#f4a">让编程改变世界</font>
        </p>
        <p align="right">
            <font size="3" face="NSimSun" color="#888"><b>在下不二如是，失敬失敬</b></font>
        </p>
    </div>
</body>

</html>

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 3 3 - Shadow之块状元素阴影

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐:

点评

评分

点评

评分

点评

评分