邓超
ToQuery
弹出框界面使用的技术
2014-08-01 10:48:07   阅读802次

文本阴影

text-shadow: 0px 1px 1px #000;

浏览器支持

IEFirefoxChromeSafariOpera





所有主流浏览器都支持 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渐变图像中渐变的结束点
stopcolor-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定义过渡效果何时开始。




-----------------------------------------------------
转载请注明来源此处
原地址:#

-----网友评论----
暂无评论
-----发表评论----
微网聚博客乐园 ©2014 blog.mn886.net 鲁ICP备14012923号   网站导航