一、 制作一个相片墙

二、

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        ul{

            height: 400px;

            border:1px solid black;

            background-color: skyblue;

            margin-top:100px;

            text-align: center;/*这个属性是用来表示给内部五张图片是水平居中的*/

        }

        ul li {

            list-style:none;

            width: 150px;

            height: 200px;

            background-color: red;

            display:inline-block;

            transition:transform 1s;

            position:relative;/*使用相对定位，是想把图片能够置顶*/

            box-shadow: 0 0 10px;/*使图片有阴影*/

​

        }

        ul li:nth-child(1){

            transform: rotate(30deg);

        }

        ul li:nth-child(2){

            transform: rotate(-30deg);

        }

        ul li:nth-child(3){

            transform: rotate(50deg);

        }

        ul li:nth-child(4){

            transform: rotate(-50deg);

        }

        ul li image{

            width: 150px;

            height: 200px;

            box-sizing:border-box;

​

        }

        ul li:hover{

            /*transform:rotate(0px);*/

            transform: scale(1.5);/*放大*/

            z-index: 998;

        }

</style>

</head>

<body>

<ul>

    <li><img src="data:image/play_tennis2.jpg" alt=""></li>

    <li><img src="data:image/play_tennis2.jpg" alt=""></li>

    <li><img src="data:image/play_tennis2.jpg" alt=""></li>

    <li><img src="data:image/play_tennis2.jpg" alt=""></li>

    <li><img src="data:image/play_tennis2.jpg" alt=""></li>

</ul>

</body>

</html>

二、盒子阴影和文字阴影

1.如何给盒子添加阴影

box-shadow: 水平偏移  垂直偏移  模糊度  阴影扩展   阴影颜色   内外阴影（内阴影就是inset）

2.盒子的阴影分为外阴影和内阴影，默认情况下就是外阴影

3.阴影颜色如果不写，那就默认是文字的颜色

4.省略的写法：box-shadow:水平偏移  垂直偏移  阴影扩展 ；

5.如何给文字添加阴影

text-shadow:水平偏移 垂直偏移  模糊度  阴影颜色；


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>D173_ShadowOfBoxAndWord</title>

    <style>

        *{

            padding:0px;

            margin:0px;

​

        }

        div{

            height: 200px;

            width: 200px;

            margin:20px auto;

            background-color: red;

            border:1px solid black;

            text-align: center;

            line-height:200px;

            font-size:30px;

            box-shadow:10px 10px 10px 0px black;/*水平偏移  垂直偏移  模糊度  阴影扩展  阴影颜色  内外阴影*/

            text-shadow:3px 3px 3px blue;

        }

</style>

</head>

<body>

<div>我是盒子</div>

</body>

</html>

三、源码：

D172_PhotoWall.html

D173_ShadowOfBoxAndWord.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/D172_PhotoWall.html

https://github.com/ruigege66/HTML_learning/blob/master/D173_ShadowOfBoxAndWord.html

2.CSDN：https://blog.csdn.net/weixin_44630050

3.博客园：https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包

HTML连载70-相片墙、盒子阴影和文字阴影的更多相关文章

  1. CSS3+HTML5实现块阴影与文字阴影

    CSS 3 + HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持.本教程分5节介绍了 5 个 CSS3 技巧,可以帮你实现未来的 Web,不过,这些技术不 ...

  2. CSS学习笔记-盒子阴影及文字阴影

    盒子阴影:    1.格式:        box-shadow:h-shadow v-shadow blur spread color insert;        box-shadow:水平偏移 ...

  3. css3新增（圆角边框(border-radius)，盒子阴影(box-shadow)，文字阴影(text-shadow)，背景缩放(background-size)）

    1.圆角边框  border-radius border-radius 属性用于设置元素的外边框圆角 语法:border-radius:length; 参数值可以是数值 或者 百分比 的形式 正方形, ...

  4. 酷炫，用Html5/CSS实现文字阴影

    前两天有一个学html5前端小美女问我一个有关文字阴影的效果怎么去实现.她和我说文字阴影嘛,她也知道text-shadow,.但是却做不出想要的样子,其实css3的新功能是很强大的,不要把你的思想太过 ...

  5. css学习_css文字阴影、盒子阴影

    文字阴影和盒子阴影的用法: 多阴影

  6. 从零开始学 Web 之 CSS3（二）颜色模式，文字阴影，盒模型，边框圆角，边框阴影

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. CSS3 --添加阴影（盒子阴影、文本阴影的使用）

     CSS3 - 给div或者文字添加阴影(盒子阴影.文本阴影的使用)CSS3定义了两种阴影:盒子阴影和文本阴影.其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本.下面分别介绍两种 ...

  8. 携程移动端案列（flex布局、背景图缩放，文字阴影）

    效果图如下: <body> <div class="nav"> <div class="row"> <div clas ...

  9. IE下实现类似CSS3 text-shadow文字阴影的几种方法

    IE下实现类似CSS3 text-shadow文字阴影的几种方法 一.开始的擦边话 为了测试IE9浏览器,下午晃晃荡荡把系统换成window7的了.果然,正如网上所传言的一样,IE9浏览器确实不支持C ...

随机推荐

  1. [bzoj2152] [洛谷P2634] 聪聪可可

    Description 聪聪和可可是兄弟俩,他们俩经常为了一些琐事打起来,例如家中只剩下最后一根冰棍而两人都想吃.两个人都想玩儿电脑(可是他们家只有一台电脑)--遇到这种问题,一般情况下石头剪刀布就好 ...

  2. SycSec成都信息工程大学2019CTF-前五道WEB题writeup

    一.WEB (1)一起来撸猫 flag藏在标签的注释内  <!--这是注释--> (2)你看见过我的菜刀么 eval漏洞 利用蚁剑连接 连接密码就是要post传的参数 连接成功后在网站根目 ...

  3. 玩转Django2.0---Django笔记建站基础十(一)(常用的Web应用程序)

    第十章 常用的Web应用程序 Django为开发者提供了常见的Web应用程序,如会话控制.高速缓存.CSRF防护.消息提示和分页功能.内置的Web应用程序大大优化了网站性能,并且完善了安全防护机制,而 ...

  4. 通过示例学习rholang（上部：课程0-6）

    通过例子和实践来学习rho语言.下面的例子和练习都很值得去运行.阅读.修改和完善.修改练习和教程中任何你感到有意思的代码,这样能够获得最好的学习效果.该教程包含了rho语言最常见以及最重要的特性,足以 ...

  5. jquery的版本 纵多 ， 各个版本的插件的融合 ，

    有些插件在哪些版本下没有 插件之间因为版本冲突 是得不偿失的事情

  6. 靶机-BTRSys 2.1 Walkthrough

    BTRSys 2.1 https://www.vulnhub.com/entry/btrsys-v21,196/ 参考:https://www.jianshu.com/p/9813095ce04d 提 ...

  7. python之set集合操作

    set集合天生具有去重功能 1.创建集合,集合的value类型:string.tuple.frozenset.数字等不可变类型: s1 =set()#空集合 s2=set(") s3=set ...

  8. CSRF攻击原理

    CSRF CSRF(Cross-site request forgery)跨站请求伪造,CSRF是一种夹持用户在已经登陆的web应用程序上执行非本意的操作的攻击方式.相比于XSS,CSRF是利用了系统 ...

  9. VS2013下OpenCV2.48配置

    VS2013+OpenCV2.48配置 一.下载OpenCV OpenCV下载地址http://opencv.org/ SDK下载链接在页面右侧 根据平台选择相应的SDK下载.在Windows开发下开 ...

  10. 初见shell

    在写了一段时间的java后,发现要一次性执行多个java很麻烦,因此想到了用shell脚本去调用.但是因为之前没有学过shell,所以一切都是重新开始.在此,简单的记录下意思的基础性知识. 参数相关的 ...