一、 制作一个相片墙

二、

<!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. python+autoit用法

    一.自己封装的一些使用到的autoit库 import autoit class MouseControl(object): ''' AutoIt鼠标相关操作 ''' def __init__(sel ...

  2. 在ubuntu18.04下搭建kvm

    前一段时间一直在尝试Ubuntu上搭建xen,一直出现各种问题,各种坑 首先先感谢下面这个公司对我的耐心解答,非常感谢.特别是后面来的电话对我进行了详细的解答,所以选择搭建kvm. 1. 需要检查一下 ...

  3. 为什么RChain区块链上一定要有REV？

    RChain区块链网络上一定要有REV吗?它的作用是什么?在这篇文章里,RChain创始人Mr. Greg Meredith做了详细解读,便于业界和社区对RChain网络有更深入的认识. 作者:Gre ...

  4. chrome浏览器无法开启同步功能 request cancel

    解决办法 添加代理规则*.googleapis.com

  5. OpenDJ入门 | 5分钟快速入门Forgerock DS

    本教程为了让大家快速体验,故不做深入讲解,详细内容请留意后续进阶教程 介绍 OpenDJ是一个目录服务器,它实现了各种轻量级目录访问协议和相关标准,包括完全符合LDAPv3,但也支持目录服务标记语言( ...

  6. JVM性能优化系列-(3) 虚拟机执行子系统

    3. 虚拟机执行子系统 3.1 Java跨平台的基础 Java刚诞生的宣传口号:一次编写,到处运行(Write Once, Run Anywhere),其中字节码是构成平台无关的基石,也是语言无关性的 ...

  7. openstack启动云主机的流程

    看一下openstack启动云主机的流程图 通过上图分析可以知道: 1. 用户使用Dashboard或者CLI 把认证信息通过REST请求发送给keystone进行认证.2. Keystone校验用户 ...

  8. 代理IP批量验证程序

    #include <afxinet.h> #include <afxwin.h> #include <iostream> #include <fstream& ...

  9. Python中的hashable（散列）

    Python文档中的解释: 一个对象是可散列的,那么在它的生命周期中它的hash 值是不变的. 可散列的对象需要2个方法:__hash__()方法和__eq__()方法.两个可散列的对象相等,那么它们 ...

  10. 题解【RQNOJ PID497 0/1字串问题】

    \[ \texttt{Description} \] 编程找出符合下列条件的字符串:①字符串中仅包含 0 和 1 两个字符:②字符串的长度为 n :③字符串中不包含连续重复三次的子串. \[ \tex ...