| 软件测试 学习之路 CSS (四) | |
| 【返回本版】 【发表帖子】 【回复帖子】 | 浏览量 1000 回帖数 0 |
 |
lanlan123 等级 ☆ 楼主 发表于 2019/7/24 9:39:30 编 辑 |
|
|
一、文字样式中阶 字体样式 代码格式： 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> 蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。 |
||
| 1 |