文本阴影
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 | 定义过渡效果何时开始。 |
-----------------------------------------------------
转载请注明来源此处
原地址:#
发表