鱼C论坛

 找回密码
 立即注册
查看: 1304|回复: 18

[系列教程] 0 0 3 3 - Shadow之块状元素阴影

[复制链接]
最佳答案
199 
发表于 2017-1-26 19:34:21 | 显示全部楼层 |阅读模式

马上注册加入鱼C,享用更多服务吧^_^

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
本帖最后由 不二如是 于 2017-2-24 13:13 编辑

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

看下代码:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.                
  8.         </style>
  9. </head>
  10. <body>
  11.         <div class="box">
  12.                 <h1>块状元素</h1>
  13.         </div>
  14. </body>
  15. </html>
复制代码

效果图,啥也没有:
Snip20170126_5.png


添加box-shadow属性:
  1. <style type="text/css">
  2.                 .box{
  3.                         width: 199px;
  4.                         height: 199px;
  5.                         background: #FFF;
  6.                         box-shadow: 11px 11px 11px rgba(0,0,0,.5);
  7.                 }
  8.                         </style>
复制代码

效果图:
Snip20170126_6.png


box-shadow和text-shadow,前4个属性值一样:

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

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

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

第四位,spread,阴影尺寸;

最后一位,inset(默认outset),阴影由外转内;


先来看,spread:
  1. box-shadow: 11px 11px 11px 33px rgba(0,0,0,.5);
复制代码

效果图:
Snip20170126_7.png


inset:
  1. box-shadow: 11px 11px 11px 33px rgba(0,0,0,.5) inset;
复制代码

效果图:
Snip20170126_8.png


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

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

最重要引入圆角变,低透明度的阴影,代码如下:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.                 body{
  8.                         text-align: center;
  9.                 }
  10.                 .box{
  11.                         margin: 0 auto;
  12.                         width: 300px;
  13.                         height: 300px;
  14.                         background:#FFF;
  15.                         border-radius:5px;
  16.                         box-shadow: 0 1px 2px 11px rgba(0,0,0,.15);
  17.                 }
  18.                         </style>
  19.                
  20. </head>
  21. <body>
  22.         <div class="box">
  23.                 <h1><font face="verdana">鱼C工作室</font></h1>
  24.                 <p><font size="6" face="arial" color="#F4A">让编程改变世界</font></p>
  25.                 <p align="right"><font size="3" face="NSimSun" color="#888"><b>在下不二如是,失敬失敬</b></font></p>
  26.         </div>
  27. </body>
  28. </html>
复制代码

效果图:
游客,如果您要查看本帖隐藏内容请回复




这位鱼油,如果喜欢本系列HTML帖子,请订阅 专辑&#9758;传送门)(不喜欢更要订阅

评分

参与人数 1荣誉 +5 鱼币 +5 贡献 +3 收起 理由
睦ちゃん她爹 + 5 + 5 + 3 感谢楼主无私奉献!

查看全部评分

本帖被以下淘专辑推荐:

最佳答案
3 
发表于 2017-3-27 23:39:13 | 显示全部楼层
本帖最后由 joker11111 于 2017-3-27 23:40 编辑

交作业啦啦啦啦啦
222.png


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


  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <style type="text/css">
  6.                         body
  7.                         {
  8.                                 margin:30px;
  9.                                 background-color:#E9E9E9;
  10.                                 text-align: center;
  11.                         }

  12.                         div.polaroid
  13.                         {
  14.                                 width:294px;
  15.                                 padding:10px 10px 20px 10px;
  16.                                 border:1px solid #BFBFBF;
  17.                                 background-color:white;
  18.                                 /* Add box-shadow */
  19.                                 box-shadow:2px 2px 3px #aaaaaa;
  20.                         }

  21.                         .rotate_left
  22.                         {
  23.                                 float:left;
  24.                                 transform:rotate(7deg);
  25.                         }

  26.                         .rotate_right
  27.                         {
  28.                                 float:left;
  29.                                 transform:rotate(-8deg);
  30.                         }
  31.                 </style>
  32.         </head>
  33. <body>

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

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


  42. </body>
  43. </html>

复制代码

点评

我很赞同!: 5.0
我很赞同!: 5
学习了~  发表于 2017-3-28 07:00

评分

参与人数 1荣誉 +5 鱼币 +5 贡献 +5 收起 理由
不二如是 + 5 + 5 + 5 举一反三!!!

查看全部评分

最佳答案
0 
发表于 2017-4-26 15:36:48 | 显示全部楼层
交作业
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>块状元素阴影(box - shadow)</title>
  6.         <style>
  7.                 body
  8.                 {
  9.                         margin: 100px;
  10.                         background-color:beige;
  11.                 }
  12.                 div.polaroid
  13.                 {
  14.                         width:294px;
  15.                         padding:10px 10px 20px 10px;
  16.                         border:1px solid #BFBFBF;
  17.                         background-color:white;
  18.                         border-radius:5px;
  19.                         box-shadow: 2px 2px 2px 20px #aaaaaa;
  20.                 }
  21.                 .rotate_left{
  22.                         float: left;
  23.                         transform:rotate(8deg);
  24.                 }
  25.                 .rotate_right{
  26.                         float: left;
  27.                         transform:rotate(-8deg);
  28.                 }
  29.         </style>
  30. </head>
  31. <body>
  32. <div class="polaroid rotate_left">
  33.         <img src="eg_cute.gif" alt="动态图片"  />
  34.         <p class="caption">gif图</p>
  35. </div>

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

  40. </body>
  41. </html>
复制代码
0028块状元素阴影(box   shadow).png

点评

我很赞同!: 5.0
我很赞同!: 5
棒棒!  发表于 2017-4-26 16:43
最佳答案
0 
发表于 2017-3-6 14:45:27 From FishC Mobile | 显示全部楼层
看w3school容易睡觉,看楼主的像看段子一样。。也是6的很

评分

参与人数 1鱼币 +10 收起 理由
不二如是 + 10 热爱鱼C^_^

查看全部评分

最佳答案
199 
 楼主| 发表于 2017-3-6 14:57:20 | 显示全部楼层
a540656809 发表于 2017-3-6 14:45
看w3school容易睡觉,看楼主的像看段子一样。。也是6的很


哈哈,好样儿的~
最佳答案
0 
发表于 2017-3-7 16:54:22 | 显示全部楼层
谢谢分享。
最佳答案
0 
发表于 2017-3-28 17:28:58 | 显示全部楼层
效果很好看!!
最佳答案
45 
发表于 2017-3-29 19:41:45 | 显示全部楼层
从此也是有影子的人了,不,块儿了。
最佳答案
0 
发表于 2017-5-12 11:54:52 From FishC Mobile | 显示全部楼层
学习一下
最佳答案
0 
发表于 2017-6-9 09:08:02 From FishC Mobile | 显示全部楼层
看看
最佳答案
0 
发表于 2017-7-6 14:14:12 | 显示全部楼层
非常好
最佳答案
0 
发表于 2017-7-19 03:11:05 | 显示全部楼层
回复看帖
最佳答案
0 
发表于 2017-7-19 03:22:43 | 显示全部楼层
交作业!
033.jpg
最佳答案
0 
发表于 2018-3-15 22:19:35 | 显示全部楼层
好多地方的术语看的有点懵
最佳答案
0 
发表于 2018-3-22 17:38:16 | 显示全部楼层
效果图
最佳答案
0 
发表于 2018-6-13 21:31:01 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>033</title>
  6.         <style type="text/css">
  7.                 .box{
  8.                         margin: 0 auto;
  9.                         width:300px;
  10.                         height:300px;
  11.                         background:#FFF;
  12.                         border-radius:5px;
  13.                         box-shadow:0 1px 2px 11px rgba(0,0,0,.15);
  14.                 }
  15.                 body{
  16.                         text-align:center;
  17.                 }

  18.         </style>
  19. </head>
  20. <body>
  21.         <div class="box">
  22.                 <h1><font face="verdana">魚C工作室</font></h1>
  23.                 <p><font size="6" face="arial" color="#F4A">讓編程改變世界</font></p>
  24.                 <p align="right"><font size="3" face="NSimSum" color="#888"><b>在下Ciprino,失敬失敬</b></font></p>
  25.         </div>
  26. </body>
  27. </html>
复制代码


033.jpg
最佳答案
1 
发表于 2018-8-2 20:51:49 | 显示全部楼层
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

小甲鱼强烈推荐上一条 /1 下一条

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号

GMT+8, 2018-8-22 08:26

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表