×

css3阴影效果按钮 阴影 border

css3边框阴影border-shadow有什么作用?css中outline和border的区别

admin admin 发表于2022-06-10 20:32:20 浏览278 评论0

抢沙发发表评论

css3边框阴影border-shadow有什么作用


设置边框阴影不会影响盒子的布局,即不会影响其兄弟元素的布局
spread可以与blur、h-shadow、v-shadow相互抵消,blur不可为负值
可以设置多重边框阴影,实现更好的效果,增强立体感。by三人行慕课

css中outline和border的区别


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有可能是非矩形的

怎么给按钮加阴影 html


给按钮加阴影,这个功能我们的css是无法实现的,不过现在的css3还是可以的,通过box-shadow这个属性来设置,他的参数有:
阴影类型:此参数可选。如不设值,默认投影方式是外阴影;如取其唯一值“inset”,其投影为内阴影;
X-offset:阴影水平偏移量,其值可以是正负值。如果值为正值,则阴影在对象的右边,其值为负值时,阴影在对象的左边;
Y-offset:阴影垂直偏移量,其值也可以是正负值。如果为正值,阴影在对象的底部,其值为负值时,阴影在对象的顶部;
阴影模糊半径:此参数可选,,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;
阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;
阴影颜色:此参数可选。如不设定颜色,浏览器会取默认色,但各浏览器默认取色不一致,特别是在webkit内核下的safari和chrome浏览器下表现为透明色,在Firefox/Opera下表现为黑色(已验证),建议不要省略此参数。
《html》
《head》
《style》
#but{
box-shadow:-10px 0 10px red, /*左边阴影*/
}

《/style》

《/head》

《body》
《input type=’button’ id=’but’ value=“确定“》

《/body》

《/html》
这样就实现了,加阴影的效果。
-border