一、 制作一个相片墙

二、

<!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. B-Tree 和 B+Tree 结构及应用，InnoDB 引擎， MyISAM 引擎

    1.什么是B-Tree 和 B+Tree,他们是做什么用的? B-Tree是为了磁盘或其它存储设备而设计的一种多叉平衡查找树,B-Tree 和 B+Tree 广泛应用于文件存储系统以及数据库系统中. ...

  2. Docker 安装 Elasticsearch+kibana

    1 下载镜像 docker pull elasticsearch:7.4.1 docker pull kibana:7.4.1 拉取的镜像如下: 2 创建network 创建一个网络,名字任意取,使得 ...

  3. Dynamics 365 CRM 配置field service mobile

    配置field service mobile其实微软是有官方文档的, 但是没有坑的微软产品不是好产品. 一些细节设置文中还是没有考虑到的. 所以这里带大家配置一下field service mobil ...

  4. CTF--HTTP服务--SQL注入GET参数

    开门见山 1. 扫描靶机ip,发现PCS 192.168.31.37 2. 用nmap扫描开放端口信息 3. 快速扫描全部信息 4. 探测敏感信息 5. 用浏览器打开用户登录页面 6. 使用OWASP ...

  5. Docker三剑客之Machine

    前言简介 Docker-machine(中文翻译docker机):一种提供管理多个docker主机的工具:提供docker主机容器的远程创建.管理.删除等功能:这样的docker主机容器前辈们称之为D ...

  6. Shell常用语句及结构

    条件判断语句之if if 语句通过关系运算符判断表达式的真假来决定执行哪个分支:shell有三种if语句样式,如下: 语句1 if [ expression ] then Statement(s) t ...

  7. vue报错Error in v-on handler: "RangeError: Maximum call stack size exceeded"

    看下面的报错 错误 看到这个错误一脸懵逼.后面了解到,是因为程序进入了死循环,后面检查了我的代码,原来在这里自己调用自己

  8. 并发队列之LinkedBlockingQueue

    上一篇我们看了一下这个队列ConcurrentLinkedQueue,那就是一个无界非阻塞链表,我们这次来看看LinkedBlockingQueue,这个队列看名字就知道是一个阻塞式队列(也就是一个单 ...

  9. TypeScript躬行记（6）——高级类型

    本节将对TypeScript中类型的高级特性做详细讲解,包括交叉类型.类型别名.类型保护等. 一.交叉类型 交叉类型(Intersection Type)是将多个类型通过“&”符号合并成一个新 ...

  10. 透彻分析和解决一切javaWeb项目乱码问题

    前言 乱码是我们在程序开发中经常碰到且让人头疼的一件事,尤其是我们在做javaweb开发,如果我们没有清楚乱码产生的原理,碰到乱码问题了就容易摸不着头脑,无从下手. 乱码主要出现在两部分,如下: 第一 ...