HTML连载70-相片墙、盒子阴影和文字阴影
一、 制作一个相片墙
二、
<!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-相片墙、盒子阴影和文字阴影的更多相关文章
- CSS3+HTML5实现块阴影与文字阴影
CSS 3 + HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持.本教程分5节介绍了 5 个 CSS3 技巧,可以帮你实现未来的 Web,不过,这些技术不 ...
- CSS学习笔记-盒子阴影及文字阴影
盒子阴影: 1.格式: box-shadow:h-shadow v-shadow blur spread color insert; box-shadow:水平偏移 ...
- css3新增(圆角边框(border-radius),盒子阴影(box-shadow),文字阴影(text-shadow),背景缩放(background-size))
1.圆角边框 border-radius border-radius 属性用于设置元素的外边框圆角 语法:border-radius:length; 参数值可以是数值 或者 百分比 的形式 正方形, ...
- 酷炫,用Html5/CSS实现文字阴影
前两天有一个学html5前端小美女问我一个有关文字阴影的效果怎么去实现.她和我说文字阴影嘛,她也知道text-shadow,.但是却做不出想要的样子,其实css3的新功能是很强大的,不要把你的思想太过 ...
- css学习_css文字阴影、盒子阴影
文字阴影和盒子阴影的用法: 多阴影
- 从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- CSS3 --添加阴影(盒子阴影、文本阴影的使用)
CSS3 - 给div或者文字添加阴影(盒子阴影.文本阴影的使用)CSS3定义了两种阴影:盒子阴影和文本阴影.其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本.下面分别介绍两种 ...
- 携程移动端案列(flex布局、背景图缩放,文字阴影)
效果图如下: <body> <div class="nav"> <div class="row"> <div clas ...
- IE下实现类似CSS3 text-shadow文字阴影的几种方法
IE下实现类似CSS3 text-shadow文字阴影的几种方法 一.开始的擦边话 为了测试IE9浏览器,下午晃晃荡荡把系统换成window7的了.果然,正如网上所传言的一样,IE9浏览器确实不支持C ...
随机推荐
- 从0开发3D引擎(九):实现最小的3D程序-“绘制三角形”
目录 上一篇博文 运行测试截图 需求分析 目标 特性 头脑风暴 确定需求 总体设计 具体实现 新建Engine3D项目 实现上下文 实现_init 实现"获得WebGL上下文" 实 ...
- 「 从0到1学习微服务SpringCloud 」02 Eureka服务注册与发现
系列文章(更新ing): 「 从0到1学习微服务SpringCloud 」01 一起来学呀! Spring Cloud Eureka 基于Netflix Eureka做了二次封装(Spring Clo ...
- Win10如何关闭最近使用文件夹
如果默认开启了最近使用文件夹功能的话,最近浏览的文件就会被记录下来.所以看完各种教学资料后,并不是关掉或者重启别人就不知道你看了什么. 方法一: Win10怎么关闭最近使用文件夹 如何清理使用痕迹 从 ...
- typescript step by step two
- 分布式RPC系统框架Dubbo
导读 Apache Dubbo是一款高性能.轻量级的开源Java RPC框架,它提供了三大核心能力:面向接口的远程方法调用,智能容错和负载均衡,以及服务自动注册和发现. dubbo官网:点我直达 第一 ...
- 团队第一次作业(软工C#造梦厂)
一.团队简介 a.团队名称:软工C#造梦厂 b.队员列表 姓名 学号 张旭(组长) 201731024123 周成杰 201731024136 邹扬锋 201731024134 赵俊安 2017310 ...
- Linux网络文件共享服务之smaba
一.SAMBA服务简介 samba是1991年由Andrew Tridgel开发实现,主要用于Windows和unix文件共享.samba实现了共享文件和打印,实现在线编辑,登录SAMBA用户的身份认 ...
- MySql配置环境变量
完成后安装好MySQL,为MySQL配置环境变量. 0)在我的电脑上点击右键选择属性-->高级系统设置-->环境变量1)新建MYSQL_HOME变量,并配置:D:\Develop\mysq ...
- docker基础及命令
1.启动docker sudo systemctl start docker sudo systemctl restart docker sudo systemctl stop docker sudo ...
- Educational Codeforces Round 80 (Rated for Div. 2)部分题解
A. Deadline 题目链接 题目大意 给你\(n,d\)两个数,问是否存在\(x\)使得\(x+\frac{d}{x+1}\leq n\),其中\(\frac{d}{x+1}\)向上取整. 解题 ...