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

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

  1. 1、本文档共8页,可阅读全部内容。
  2. 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
  5. 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
  6. 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们
  7. 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
  8. 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
小程序商店9.cn提供wxss学习系列三一:背景(Background)与颜色(Color)一、背景:background。设置对象的背景特性。一个元素可以设置多重背景图像,每组之间用逗号隔开,如果存在重叠关系,前面的背景图像会覆盖在后面背景图上。1.background-color:指定背景的颜色。取值:正常的颜色取值。2.background-image:背景图片。如果设置了这个属性,最好也添加下background-color ,用于当背景image不可见时保持与文本颜色有一定的对比度3.background-repeat:设置对象背景图如何铺排填充。repeat-x:背景在横向上平铺。repeat-y:背景在纵向上平铺。repeat:背景图在横向纵向上平铺。no-repeat:图像不平铺。round:背景图像自动缩放直到适应且填充整个容器。space:背景图像以相同的间距平铺且填充满整个容器或者某个方向。space:round: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等等来设置。opacity:设置对象的不透明度。取值范围为0.0-1.0。opacity:0.2opacity:0.8二:边框(Border)一.边框:border 设置对象边框的特性。1.语法:border:length style color2.style:none ,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset。二.相关属性。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:设置对象使用圆角边框。取值为数字或者百分比。8.当然也可以给4个角单独的设置:左上角:border-top-left-radius,右上角:border-top-right-radius,左下角:border-bottom-left-radius,右下角:border-bottom-right-radius9.box-shadow:设置对象阴影。第一个值:设置水平方向阴影偏移量。第二个值:设置垂直方向阴影偏移量。第三个值:设置对象的阴影模糊值。不允许为负值第四个值:设置对象的阴影外延值,不允许为负值第五个值:color。第六个值:inset,阴影在左上位置,如下图:box-shadow:6rpx 6rpx 6rpx 6rpx rebeccapurple inset10.border-image:对象的边框样式使用图片来填充。1border-image-source:设置图片的来源。使用绝对或者相对地址或者渐变色来确定图片。2border-ima

文档评论(0)

502992 + 关注
实名认证
文档贡献者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档