0 0 3 3 - Shadow之块状元素阴影,Web密训营,Web开发,鱼C论坛

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

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

本帖最后由不二如是于 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>
效果图：
**** Hidden Message *****

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

官方 Web 课程：

https://www.bilibili.com/video/BV1QW411N762

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

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

交作业啦啦啦啦啦{:9_236:}

创意不是自己的，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

学习一下{:10_257:}

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

好多地方的术语看的有点懵{:10_243:}

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

{:7_146:}

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

好好看好好学

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

{:10_257:}

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>

页: [1] 2 3

鱼C论坛's Archiver

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