css中红色边框的几个英文什么意思,能实现下面ms的动画是怎样的

html-css022

css中红色边框的几个英文什么意思,能实现下面ms的动画是怎样的,第1张

我咋没看到有什么淡出效果,这就是个轮播图,animation:ma 20s ease-out infinite alternate第一项是动画名称,第二项是动画完成总时间,第三项是动画的速度,第四项是动画永久进行下去,第五项是动画来回循环。ease-out:减速,在这里是快结束时减速;infinite:无穷的;alternate:轮流的,交替的。

1.border

设置元素主要的边框属性,包括border-width、border-style、border-color,可缺省,无固定顺序。

e.g.

[css] view plaincopy

border: red 10px solid

border: 5px blue

border-style

统一设置元素各边框的格式,按照CSS顺序规则。可取的值如下表所示:

CSS顺序规则:当值有4个时,依次按照上、右、下、左设置;当值有3个时,依次按照上、左右、下设置;当值有2个时,依次按照上下、左右设置;当值只有1个时,则为4个方向设置为相同的值。以本属性为例:

[css] view plaincopy

border-style: soliddotted dashed double

/*

上边框为实线

右边框为点状

下边框为虚线

左边框为双线

*/

border-style: solid dotteddashed

/*

上边框为实线

左右边框为点状

下边框为虚线

*/

border-style: soliddotted

/*

上下边框为实线

左右边框为点状

*/

border-style: solid

/*

4个方向的边框都是实线

*/

border-style的默认值为border-style:none。

border-width

统一设置元素各边框的宽度,按照CSS顺序规则。只有当border-style不为none时才有效。不能设置为负值。值可以是thin(细)、medium(中等)、thick(粗),也可以是数值。默认为border-width: medium。

border-color

统一设置元素的各边框颜色,按照CSS顺序规则。当border-style为none或hidden时失效,所以在设置边框颜色前需要保证border-style的值不为none、hidden。值可以是任意CSS支持的颜色值。默认为border-color: transparent。

border-top、border-right、border-bottom、border-left

设置元素的上/右/下/左边框的主要属性,包括border-***-style、border-***-color、border-***-width,可缺省,无固定顺序。

border-top-style、border-right-style、border-bottom-style、border-left-style

设置元素上/右/下/左边框的样式,取值与border-style相同,默认为none。

border-top-width、border-right- width、border-bottom-width、border-left- width

设置元素上/右/下/左边框的宽度,取值与border-width相同。只有当border-***-style不为none时才有效,不能为负值,默认为medium。

border-top-color、border-right- color、border-bottom-color、border-left- color

设置元素上/右/下/左边框的颜色,取值与border-color相同。只有当border-***-style不为none和hidden时才有效。默认为transparent。

2.outline(轮廓)

在元素边框边缘的外围绘制一条包围元素的线,包括outline-color、outline-style、outline-width三个子属性的设置,可缺省,无固定顺序。轮廓不占据页面空间,也不一定是矩形。

除了IE以外的浏览器都直接支持outline。只有规定了!DOCUMENT之后的IE8以上版本的浏览器才支持outline。

e.g.

[css] view plaincopy

outline: solid black

outline: dotted thin #0000ff

outline-style

设置元素轮廓的格式,其取值与border-style类似,但没有hidden值。默认为none,无轮廓。

outline-width

设置元素轮廓的宽度,其取值与border-width类似。只有当outline-style不为none时才有效。默认为medium。

outline-color

设置元素轮廓的颜色,其取值与border-color类似。只有当outline-style不为none时才有效。默认为transparent。

总结:这两者的区别有:

1.outline是不占空间的,既不会增加额外的width或者height

2.outline有可能是非矩形的