软件测试 学习之路 CSS (四)
2019-07-05 21:08
85 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44878673/article/details/94761023
提示:允许一段文字有多层阴影,多层之间用逗号隔开,每一层内,不同参数用空格隔开。
一、文字样式中阶
- 字体样式
代码格式:
font: 文字粗细 大小/行高 字体名称;
例子:font: bold 200px/400px "微软雅黑"
;
2.字体阴影
代码格式:
text-shadow:x y r color;
注:x是为负数则阴影向左,整数向右,同理y正数向上,负数向下,r代表阴影模糊程度,数值月大则越模糊,其单位都是px,color为文字颜色。
例子:
text-shadow: 10px 10px 0px red;
提示:允许一段文字有多层阴影,多层之间用逗号隔开,每一层内,不同参数用空格隔开。
- 凹凸字体 阴影巧用
原理:通过背景颜色以及不同于背景颜色的阴影打造凹凸字体效果
例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>凹凸文字</title> <style type="text/css"> body{ background: #ccc; } div{ color: #ccc; text-align: center; font: bold 200px/400px "微软雅黑"; /*text-shadow: 1px 1px 0px #fff;-1px -1px 0px #333;*/ text-shadow: 1px 1px 0px #333,-1px -1px 0px #fff; } </style> </head> <body> <div > 凹凸文字 </div> </body> </html>
二、过渡属性
过渡属性的作用就是体现元素默认样式与最终样式变化的过程。
代码格式:transition:all 1s linear 0s;
注:
- 第一个参数的作用是设置元素的哪些属性过渡,all表示全部过渡,width代表属性宽度过渡,其他不过渡,其他属性也一样。
- 的哥属性设置过渡需要的时长,单位s不能省略。
- 第三个属性设置过渡延迟多少秒执行,单位s不能省略。
- hover 设置鼠标移到某一元素时状态。
- transition 这个属性既可以添加在元素默认状态,也可以添加在鼠标上移状态即添加在hover标签内,区别就是第二种做法在鼠标离开时候不会发生过渡变化。
例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>过渡属性</title> <style type="text/css"> div{ width: 200px; height: 200px; background-color: green; transition:all 1s linear 0s; } div:hover{ width: 600px; background-color: yellow; } </style> </head> <body> <div id="\"> </div> </body> </html>
相关文章推荐
- 软件测试实践之路:学习资料倾情奉献
- 软件测试 学习之路 linux 基础命令 (三)
- 软件测试学习教程(五)-CSS基础
- 软件测试实践之路:学习资料倾情奉献
- 软件测试 学习之路 linux vim编辑器
- 软件测试实践之路:学习资料倾情奉献
- 软件测试 学习之路 基本介绍
- 软件测试 学习之路 MYSQL安装
- 软件测试之路——那些年总结出的学习经验
- 软件测试 学习之路 linux基础命令 (二)
- 软件测试实践之路:学习资料倾情奉献
- 软件测试为什么需要学习Linux的知识?Linux学到什么程度?-log5
- 软件测试学习
- “软件测试系列”学习路线图
- 深度学习之路:(一)Keras中mnist数据集测试
- 小强老师的零基础学习软件测试之LR笔记
- 软件测试规划-学习拓扑
- Qt学习之路1---软件下载安装及工程简介
- 软件测试学习笔记(1):软件测试概要
- 软件测试职业发展之路的反思(转)