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之块状元素阴影

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

评分

本帖被以下淘专辑推荐:

点评

评分

点评

评分

点评

评分

浏览过的版块