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 ...
随机推荐
- java面试| 精选基础题(2)
关注微信公众号"java从心",置顶公众号 每天进步一点点,距离大腿又近一步! 阅读本文大概需要6分钟 继续挖掘一些有趣的基础面试题,有错望指出来哈,请赐教~ 1.包装类的装箱与拆 ...
- redis server can not continue
- vijos 分梨子
点击打开题目 很有(wei)趣(suo)的一道题 暴力解法也不难,枚举大小下限与甜度下限,在一个一个地试 显然 O(n^3) 炸掉 但如何将其缩短,只好从那个式子来入手了: C1⋅(ai−a0)+C2 ...
- windows10卸载虚拟机忘记按照步骤卸载的实际问题
好久没有写博客了,由于太多事情,工作需要用到虚拟机,结果,虚拟机出问题,,,怎么办???我的办法就是卸载了重新安装一个,结果呢?太心急没有按照不知操作,今天弄了一下午,终于弄好了... 错误原因,用了 ...
- Web自动化测试项目(五)测试结果通知
一.邮件通知 使用第三方邮件发送库yagmail github地址:https://github.com/kootenpv/yagmail 安装 pip3 install yagmail demo.p ...
- Nginx(一) 简介
Nginx简介 一款基于异步框架的轻量级高性能的Web 服务器/反向代理服务器/缓存服务器/电子邮件(IMAP/POP3)代理服务器 特点 高并发量:基于 epoll/kqueue 模型开发,支持高并 ...
- Centos 7 最小化部署svn版本控制(svn协议)
1.关闭selinux sh-4.2# sed -i 's/enforcing/disabled/' /etc/selinux/config sh-4.2# reboot 2.卸载防火墙 sh-4.2 ...
- SSM 配置文件 分析
spring 配置文件(主要整合的是spring 和 mybatis 的配置文件) 问题: 两者之间没有整合在一起的时候是怎么样的 spring配置文件: Spring配置文件是用于指导Spri ...
- Leetcode 题目整理-8 Count and Say
38. Count and Say The count-and-say sequence is the sequence of integers beginning as follows: 1, 11 ...
- VS2013 连接 Oracle出现尝试加载 Oracle 客户端库时引发 BadImageFormatException 32位与64位问题解决方案
摘自 :https://blog.csdn.net/similing/article/details/54318434 遇到这种问题是64位系统安装32位Oracle与VS2010的连接出现问题 解决 ...