css制做网页页面中的虚线(border特性的应用方式

日期:2021-01-20 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序

这里面框特性的虚线边框border操纵虚线。下列配备的css 高宽比(css height)和css 宽度(css width)为350像素。

1、4边为虚线边框

border:1px dashed #000; 黑色虚线边框

案例:

CSS编码: .hackhome{border:1px dashed #000; height:50px;width:350px}

Html编码: 我的4边为黑色虚线边框

这里配备边框缩写方式解释hackhome选择器4边边框为1px的黑色虚线边框

2、左侧为虚线:

CSS编码: .hackhome⑴{border-left:1px dashed #000; height:50px;width:350px}

Html编码: 我的左侧为黑色虚线边框

这里配备了左侧1边为黑色虚线边框

3、右侧为虚线:

CSS编码: .hackhome⑵{border-right:1px dashed #000; height:50px;width:350px}

Html编码: 我的右侧为黑色虚线边框

这里配备了右侧1边为黑色虚线边框

4、顶部边(上边)为虚线:

CSS编码: .hackhome⑶{border-top:1px dashed #000; height:50px;width:350px}

Html编码: 我的上边为黑色虚线边框

这里配备了顶边(上边线)1边为黑色虚线边框

5、底部边(下边)为虚线:

CSS编码: .hackhome⑷{border-bottom:1px dashed #000; height:50px;width:350px}

Html编码: 我的下边为黑色虚线边框

这里配备了底边(下边线)1边为黑色虚线边框

6、随便1边不为虚线,其它3边为虚线情况

参加右侧边框不为虚线而沒有边线,其它3边为黑色虚线边框

CSS编码: .hackhome⑸{border:1px dashed #000;border-right:0; height:50px;width:350px}

Html编码: 我的右侧边框无垠线而其它3边为黑色虚线边框案例

这里先配备了该目标4边为黑色1px虚线边框,紧接着又配备1边边线为0的配备,这样非常于配备了3边的边框虚线特性,可是这里注意边框特性配备前后左右次序

上一篇:纯CSS3完成翻转的齿轮动漫实际效果 返回下一篇:没有了