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-相片墙、盒子阴影和文字阴影相关推荐

ps基本操作以及盒子综合案例、圆角边框、盒子阴影、文字阴影
网页美工大部分效果图都是利用ps做的,以后切图工作在ps完成. 综合案例图片不超出box(和父亲一样宽): 标签都是有语义的,标题要用h4,合理的地方用合理的标签. 每个盒子都取类名比较方便找到,利 ...
CSS 盒子阴影和文字阴影
目录盒子阴影文字阴影盒子阴影 CSS3中新增了盒子阴影,我们可以使用box-shadow属性为盒子添加阴影语法: box-shadow:h-shadow v-shadow blur sprea ...
css第4天笔记-圆角边框；盒子阴影；文字阴影；浮动；PS切图
学习内容:圆角边框:盒子阴影:文字阴影:浮动:PS切图一.其他样式 1.圆角边框在 CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了. border-radius 属性用于设置元素的 ...
CSS圆角边框、盒子阴影及文字阴影详解
文章目录 1. 圆角边框 2. 盒子阴影 3. 文字阴影 1. 圆角边框在CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了. border-radius 属性用于设置元素的外边框圆角. ...
CSS 阴影效果（盒子阴影，文字阴影）
总结: 盒子阴影和文字阴影可以理解为,在目标盒子下方,有另外一个盒子,两个盒子的位置和大小是一样的,所以平时是看不见的, box-shadow就是用来控制下面盒子的位置,大小和颜色的. 1. 盒子阴影 ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
CSS中的盒子阴影和文字阴影
去掉li前面的小圆点: list-style: none; 圆角边框:盒子编程圆角. 语法格式: border-radius: length; 写法: border-radius:50%;//变成圆形 ...
CSS圆角边框、盒子阴影、文字阴影（01-07课）
01.综合案例-快报模块布局分析 1.大盒子div 2.分2个小盒子(上盒子为标题h,下盒子为列表(无序列表)) 02.03.04.综合案例-快报制作 1.头部制作 2.快报模块列表制作代码: &l ...
CSS阴影属性-文字阴影盒子阴影
文字阴影在css3中通过text-shadow属性实现对页面中的文字添加阴影效果语法格式 text-shadow:水平距离垂直距离阴影的模糊半径阴影的颜色其中水平距离和垂直距离为必填选项, ...

HTML连载70-相片墙、盒子阴影和文字阴影

HTML连载70-相片墙、盒子阴影和文字阴影相关推荐

最新文章

热门文章