弹出框界面使用的技术
2014-08-01 10:48:07
阅读896次
文本阴影
text-shadow: 0px 1px 1px #000;
浏览器支持
| IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
所有主流浏览器都支持 text-shadow 属性。
注释：Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow 属性。
语法
text-shadow: h-shadow v-shadow blur color;
注释：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
| 值 | 描述 | |
|---|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 | |
| v-shadow | 必需。垂直阴影的位置。允许负值。 | |
| blur | 可选。模糊的距离。 | |
| color | 可选。阴影的颜色。参阅 CSS 颜色值。 |
颜色渐变
background-image: -moz-linear-gradient(top, #03b3f6, #407FFF); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #407FFF),color-stop(1, #0374c6) );
webkit核心浏览器下的的基本语法如下：
-webkit-gradient(type, start_point, end_point, / stop...) -webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, / stop...)
参数
| 参数类型 | 简要说明 |
|---|---|
| type | 渐变的类型，可以是线性渐变(linear)或是径向渐变(radial) |
| start_point | 渐变图像中渐变的起始点 |
| end_point | 渐变图像中渐变的结束点 |
| stop | color-stop()方法，指定渐变进程中特定的颜色 |
| inner_center | 内部中心点，径向渐变起始圆环 |
| inner_radius | 内部半径，径向渐变起始圆 |
| outer_center | 外部渐变结束圆的中心点 |
| outer_radius | 外部渐变结束圆的半径 |
圆角矩形
border-radius: 8px;
语法
border-radius: 1-4 length|% / 1-4 length|%;
注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。
| 值 | 描述 | 测试 |
|---|---|---|
| length | 定义圆角的形状。 | 测试 |
| % | 以百分比定义圆角的形状。 | 测试 |
例子 1
border-radius:2em;
等价于：
border-top-left-radius:2em; border-top-right-radius:2em; border-bottom-right-radius:2em; border-bottom-left-radius:2em;
例子 2
border-radius: 2em 1em 4em / 0.5em 3em;
等价于：
border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em;
过度效果
-webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); -webkit-transition: -webkit-transform 0.6s ease-out; -moz-transition: -moz-transform 0.6s ease-out; -o-transition: -o-transform 0.6s ease-out; transition: transform 0.6s ease-out;
实例
把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：
div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */-webkit-transition: width 2s; /* Safari 和 Chrome */-o-transition: width 2s; /* Opera */}定义和用法
transition 属性是一个简写属性，用于设置四个过渡属性：
transition-property
transition-duration
transition-timing-function
transition-delay
注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。
| 默认值： | all 0 ease 0 |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.transition="width 2s" |
语法
transition: property duration timing-function delay;
| 值 | 描述 |
|---|---|
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
-----------------------------------------------------
转载请注明来源此处
原地址：#
发表