欢迎光临,了解微信小程序开发,就上易用通!

wxss学习系列《三》背景(Background)与颜色(Color),边框

发布:2018-01-24 11:26浏览: 来源:网络 作者:tianshu

一。背景:background。设置对象的背景特性。一个元素可以设置多重背景图像,每组之间用逗号隔开,如果存在重叠关系,前面的背景图像会覆盖在后面背景图上。

wxss学习系列《三》背景(Background)与颜色(Color),边框(图1)

1.background-color:指定背景的颜色。取值:正常的颜色取值。

2.background-image:背景图片。如果设置了这个属性,最好也添加下background-color ,用于当背景image不可见时保持与文本颜色有一定的对比度

3.background-repeat:设置对象背景图如何铺排填充。

repeat-x:背景在横向上平铺。

repeat-y:背景在纵向上平铺。

repeat:背景图在横向纵向上平铺。

no-repeat:图像不平铺。

round:背景图像自动缩放直到适应且填充整个容器。

space:背景图像以相同的间距平铺且填充满整个容器或者某个方向。

space:

 

wxss学习系列《三》背景(Background)与颜色(Color),边框(图2)

round:

 

wxss学习系列《三》背景(Background)与颜色(Color),边框(图3)

 

4.background-attachment:指定对象的背景图像是随对象内容滚动还是固定的。

取值:fixed:固定位置。scroll:相对于元素固定,跟着元素。local:相对于元素内容固定,总是跟着内容。

5.background-position:指定对象的背景图像位置。

取值:left,right,top,bottom,center。也可以用百分比。

6.background-size:指定对象的背景图像的尺寸大小。

取值:auto:背景图的真实大小。cover:等比例缩放到完全覆盖容器。有可能超出容器。

  contain:将背景图等比例缩放到宽度或者高度与容器的宽度或者高度相等,始终都在容器内。

7.background-clip:指定对象的背景图像向外裁剪的区域。

取值:padding-box:从padding区域(不含padding)开始向外裁剪背景。

   border-box:从border区域(不含border)开始向外裁剪背景。

   content-box:从content 区域开始向外裁剪背景。

   text:从前景内容的形状做为裁剪区域向外裁剪。

8.background-origin:指定对象的背景图像显示的原点。

 

取值:padding-box:从padding区域(不含padding)开始向外裁剪背景。

   border-box:从border区域(不含border)开始向外裁剪背景。

   content-box:从content 区域开始向外裁剪背景。

 

二。颜色:color:设置对象的文本颜色。

可使用颜色名,rgb,hex,rgba,hsl,hsla,transparent等等来设置。

wxss学习系列《三》背景(Background)与颜色(Color),边框(图4)

opacity:设置对象的不透明度。取值范围为0.0-1.0。

opacity:0.2

wxss学习系列《三》背景(Background)与颜色(Color),边框(图5)

opacity:0.8

wxss学习系列《三》背景(Background)与颜色(Color),边框(图6)


 

颜色名可参考:颜色参考链接


二:边框(Border)

一.边框:border 设置对象边框的特性。

1.语法:border:length   style  color

2.style:none ,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset。

wxss学习系列《三》背景(Background)与颜色(Color),边框(图7)

  

二.相关属性。

1.border-width:设置边框宽度:常用取值:medium:默认值,相当于3px。thin:1px。thick:5px。不可以为负值。

2.border-color:设置边框颜色。

3.border-top:设置顶部边框。border-top-width,border-top-style,border-top-color 分别设置 宽度,样式以及颜色

4.border-right:设置右边框。

5.border-bottom:设置底边框。

6.border-left:设置左边框。

7.border-radius:设置对象使用圆角边框。取值为数字或者百分比。

wxss学习系列《三》背景(Background)与颜色(Color),边框(图8)

 

8.当然也可以给4个角单独的设置:

左上角:border-top-left-radius,右上角:border-top-right-radius,左下角:border-bottom-left-radius,右下角:border-bottom-right-radius

9.box-shadow:设置对象阴影。

wxss学习系列《三》背景(Background)与颜色(Color),边框(图9)

第一个值:设置水平方向阴影偏移量。

第二个值:设置垂直方向阴影偏移量。

第三个值:设置对象的阴影模糊值。不允许为负值

第四个值:设置对象的阴影外延值,不允许为负值

第五个值:color。

第六个值:inset,阴影在左上位置,如下图:box-shadow:6rpx 6rpx 6rpx 6rpx rebeccapurple inset

wxss学习系列《三》背景(Background)与颜色(Color),边框(图10)

10.border-image:对象的边框样式使用图片来填充。

1>border-image-source:设置图片的来源。使用绝对或者相对地址或者渐变色来确定图片。

2>border-image-slice :设置边框背景图的分隔方式。取值:数值/百分比 fill.该属性指定从上右下左来分割图片,将图像分成4个角,4条边以及中间区域。中间区域始终是透明的,除非使用关键字fill。

3>border-image-width:设置边框背景的宽度。用于指定使用多厚的边框来承载呗裁剪后的图像。

4>border-image-outset:设置对象的边框背景图的扩展,意思就是说假如设置了10rpx,那么图像就会在原来基础上外延10rpx在显示。

5>border-image-repeat:设置对象的边框图片的平铺方式。

stretch:拉伸。

repeat:平铺,碰到边界的时候截断。

round:根据边框的尺寸动态调整图片的大小,使得刚好可以铺满整个边框。

space:根据边框的尺寸动态调整图片的之间的间距,使得刚好铺满整个边框。

 




免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。