追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


软件测试 学习之路 CSS (四)

2019-7-15 释然 前端及开发文章及欣赏


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

一、文字样式中阶

字体样式
代码格式:
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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 平面设计服务

标签: CSS 软件测试 学习之路 (四) « B端产品设计的6大挑战 | Material Design最新数据可视化指南»


订阅Rss