微信小程序开发手记之三:backgroud和border属性
2017-04-14 14:08
465 查看
先来看一段样式,在wxss中
注意,page前面并没有小数点,而且也不用被调用,它会自动被框架调用,使用里面的属性来设置当前页面。
效果图如下:
repeat-x,在x方向上重复
repeat-y,在y方向上重复
no-repeat,不重复
repeat,在x和y方向重复,这是默认值
round,背景图自动缩放直到适应且填充整个容器。
space,背景图片以相同间距平铺且填充满整个容器或者某个方向
round(左)和space(右)的区别如下图
background-repeat属性必须放在background-image属性后面,如果放在它的前面,background-repeat就不起作用。
数值
left
right
center
设置背景图在y方向上的位置:background-position-y
数值
top
bottom
center
设置背景图的位置:background-position
数值,比如直接写background-position:200rpx 100rpx;意思就是在x轴上偏移200rpx,在y轴上偏移100rpx。如果只写了一个值,比如:background-position:200rpx;那么在x轴上偏移200rpx,y轴上居中。
别名,background-position:right top;意思是x轴上居最右边,y轴上居最上面,如果不设置第2个,则只在x轴上变化位置,y轴上居中。第1和第2个分别对应x和y方向。
注意,background-position的2个参数值之间用空格分割,并不是逗号
再来看一下其它的background属性,先看background-size
background-size属性用来设置背景图片的尺寸大小,有3个值可供选择
auto,默认值,显示背景图的真是大小
contain,将背景图等比缩放宽度或高度,使之与容器的宽度或高度相等,整张图始终在容器内。
cover,等比缩放图片,直图片完全覆盖容器,有可能超出容器。
3个属性的效果图如下,auto(左),contain(中),cover(右)
background-clip属性,有3个值
padding-box,从padding区域(不含padding)开始向外裁剪背景
border-box,从border区域(不含border)开始向外裁剪背景
content-box,从content 区域开始向外裁剪背景
text,从前景内容的形状做为裁剪区域向外裁剪。
下图是运行效果,padding-box(左),content-box(中),border-box(右)
比较容易看出content-box的意思。padding-box和border-box不知道有什么区别。
在写background-image时,之前里面有一个background属性,放在它前面,后面的background会把前面的background-image洗掉。
padding-box,从padding区域原点(左上角)开始绘制背景图像
border-box,从border区域原点(左上角)开始绘制背景图像
content-box,从content 区域的原点(左上角)开始绘制背景图像
下图是运行效果,padding-box(左),content-box(中),border-box(右)
fixed,固定位置,原点为父组件的原点。
scroll,相对于元素固定,跟着元素
local,相对于元素内容固定,总是跟着内容
运行效果图如下,fixed(左),scroll(中),local(右)
scroll和local的区别暂不清楚。
运行效果图如下:
它等同于
background使用时,各个属性之间用空格分割,并不是用逗号。
下面是opacity=0.3,opacity=0.6,opacity=1.0的效果图。
运行效果如下:
css中有各种颜色,请点击这里。
dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden
运行效果图如下
除了直接使用border属性一起设置style,color,width外,还能单独设置。
还可以单独设置一边,分为4组。
border-width,可以设置thin(1px),medium(3px),thick(5px),还可以直接设置具体数值的rpx。
border-style,与上面列出的一样,共10种
border-color,同上,除了直接写色值外,还可以使用内置的别名。
另外,还可以单独设置一条边,如下
设置上面top的:
border-top:
border-top-color
border-top-width
border-top-style
示例:
上面2种写法效果一样。
设置左边left的
border-left
border-left-color
border-left-style
border-left-width
上面2种写法效果相同
设置下面bottom的
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
上面2种写法效果相同
设置右侧right的
border-right
border-right-color
border-right-style
border-right-width
上面2种写法效果相同
除了style,width,color外,还有圆角属性
border-radius
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
上面2种写法效果相同
下面是一个示例
设置水平方向阴影偏移量。
设置垂直方向阴影偏移量。
设置对象的阴影模糊值。不允许为负值
设置对象的阴影外延值,不允许为负值
color。
inset=阴影在左上位置,不设置这个值,阴影在右下方
为一个text设置如下样式
效果图如下
page{ background-color: cadetblue; background-image: url(../../../image/weixin_logo.png); background-repeat:repeat-x; background-position-y: top; }
注意,page前面并没有小数点,而且也不用被调用,它会自动被框架调用,使用里面的属性来设置当前页面。
效果图如下:
background-color
设置背景色,这里设置的是界面的背景色,也可以是设置组件的背景色。既可以直接使用色值,如#ffffff,也可以使用小程序中内置的一些设置了别名的色值,如上面的cadetblue。background-image
设置背景图片,使用url(../../../image/weixin_logo.png),将图片地址当参数传入即可。background-repeat
背景图片的重复类型,有以下几个值repeat-x,在x方向上重复
repeat-y,在y方向上重复
no-repeat,不重复
repeat,在x和y方向重复,这是默认值
round,背景图自动缩放直到适应且填充整个容器。
space,背景图片以相同间距平铺且填充满整个容器或者某个方向
round(左)和space(右)的区别如下图
background-repeat属性必须放在background-image属性后面,如果放在它的前面,background-repeat就不起作用。
background-position,background-position-x,background-position-y
设置背景图在x方向上的位置:background-position-x数值
left
right
center
设置背景图在y方向上的位置:background-position-y
数值
top
bottom
center
设置背景图的位置:background-position
数值,比如直接写background-position:200rpx 100rpx;意思就是在x轴上偏移200rpx,在y轴上偏移100rpx。如果只写了一个值,比如:background-position:200rpx;那么在x轴上偏移200rpx,y轴上居中。
别名,background-position:right top;意思是x轴上居最右边,y轴上居最上面,如果不设置第2个,则只在x轴上变化位置,y轴上居中。第1和第2个分别对应x和y方向。
注意,background-position的2个参数值之间用空格分割,并不是逗号
再来看一下其它的background属性,先看background-size
page{ background-color: cadetblue; background-image: url(../../../image/weixin_logo.png); background-repeat:no-repeat; background-size: auto; }
background-size属性用来设置背景图片的尺寸大小,有3个值可供选择
auto,默认值,显示背景图的真是大小
contain,将背景图等比缩放宽度或高度,使之与容器的宽度或高度相等,整张图始终在容器内。
cover,等比缩放图片,直图片完全覆盖容器,有可能超出容器。
3个属性的效果图如下,auto(左),contain(中),cover(右)
background-clip属性,有3个值
padding-box,从padding区域(不含padding)开始向外裁剪背景
border-box,从border区域(不含border)开始向外裁剪背景
content-box,从content 区域开始向外裁剪背景
text,从前景内容的形状做为裁剪区域向外裁剪。
<view class="demo-view-2"> <image class="image-1" src="{{urll}}"></image> </view>
.demo-view-2{ background-color: darkblue; height: 1050rpx; display: flex; align-items: center; justify-content: center; } .image-1{ background-image:url(../../../image/weixin_logo.png); background-repeat: no-repeat; border-radius: 50%; width: 200rpx; height: 200rpx; background-color: white; padding: 100rpx; background-clip:border-box; }
下图是运行效果,padding-box(左),content-box(中),border-box(右)
比较容易看出content-box的意思。padding-box和border-box不知道有什么区别。
在写background-image时,之前里面有一个background属性,放在它前面,后面的background会把前面的background-image洗掉。
background-origin
background-origin设置背景图像的起点,有3个可选值padding-box,从padding区域原点(左上角)开始绘制背景图像
border-box,从border区域原点(左上角)开始绘制背景图像
content-box,从content 区域的原点(左上角)开始绘制背景图像
<view class="demo-view-2"> <image class="image-1"></image> </view>
.demo-view-2{ background-color: darkblue; height: 1050rpx; display: flex; align-items: center; justify-content: center; } .image-1{ background-image:url(../../../image/weixin_logo.png); background-repeat: no-repeat; border-radius: 50%; width: 200rpx; height: 200rpx; background-color: white; padding: 100rpx; background-clip:border-box; background-origin: padding-box; }
下图是运行效果,padding-box(左),content-box(中),border-box(右)
background-attachment
background-attachment属性,指定对象的背景图像是随对象内容滚动还是固定的。有3个值可选。fixed,固定位置,原点为父组件的原点。
scroll,相对于元素固定,跟着元素
local,相对于元素内容固定,总是跟着内容
<view class="demo-view-2"> <image class="image-1"></image> </view>
.demo-view-2{ background-color: darkblue; height: 1030rpx; display: flex; align-items: center; justify-content: center; } .image-1{ background-image:url(../../../image/weixin_logo.png); background-repeat: no-repeat; width: 750rpx; height: 700rpx; background-color: white; padding: 100rpx; background-attachment: fixed; }
运行效果图如下,fixed(左),scroll(中),local(右)
scroll和local的区别暂不清楚。
background属性
background属性,相当于上面所有以background-开头的属性的合集。比如page{ background: white url(../../../image/weixin_logo.png) no-repeat; }
运行效果图如下:
它等同于
page{ background-color: white; background-image: url(../../../image/weixin_logo.png); background-repeat:no-repeat; }
background使用时,各个属性之间用空格分割,并不是用逗号。
透明度
opacity,设置对象的不透明度。取值范围为0.0-1.0。1.0为完全不透明,0.0为完全透明。<view class="demo-view-2"> <text class="image-2">123456789</text> </view>
.demo-view-2{ background-color: darkblue; height: 1030rpx; display: flex; align-items: center; justify-content: center; } .image-2{ width: 250rpx; height: 250rpx; background-color: white; opacity: 0.3; }
下面是opacity=0.3,opacity=0.6,opacity=1.0的效果图。
color属性
color,设置文本对象的颜色,可以是颜色别名,rgb,rgba,hex,hsl,hsla,transparent等。<view class="demo-view-2"> <text class="image-2">123456789</text> </view>
.demo-view-2{ background-color: white; height: 1030rpx; display: flex; justify-content: center; } .image-2{ width: 250rpx; height: 250rpx; color:rgb(255,0,0); }
运行效果如下:
css中有各种颜色,请点击这里。
border属性
border可以设置3个属性值,style,length,color,其中length就是指宽度,color是颜色,style包含10种类型,如下:dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden
<view class="demo-view-2"> <text class="border-1">我是dotted</text> <text class="border-2">我是dashed</text> <text class="border-3">我是solid</text> <text class="border-4">我是double</text> <text class="border-5">我是groove</text> <text class="border-6">我是ridge</text> <text class="border-7">我是inset</text> <text class="border-8">我是outset</text> <text class="border-9">我是none</text> <text class="border-10">我是hidden</text> </view>
.demo-view-2{ background-color: white; height: 1030rpx; display: flex; justify-content: center; flex-direction: column; flex-wrap: wrap; } .border-1{ text-align: center; margin: 20rpx; border: dotted #00ff00 10rpx; } .border-2{ text-align: center; margin: 20rpx; border: dashed #00ff00 10rpx; } .border-3{ text-align: center; margin: 20rpx; border: solid #00ff00 10rpx; } .border-4{ text-align: center; margin: 20rpx; border: double #00ff00 10rpx; } .border-5{ text-align: center; margin: 20rpx; border: groove #00ff00 10rpx; } .border-6{ text-align: center; margin: 20rpx; border: ridge #00ff00 10rpx; } .border-7{ text-align: center; margin: 20rpx; border: inset #00ff00 10rpx; } .border-8{ text-align: center; margin: 20rpx; border: outset #00ff00 10rpx; } .border-9{ text-align: center; margin: 20rpx; border: none #00ff00 10rpx; } .border-10{ text-align: center; margin: 20rpx; border: hidden #00ff00 10rpx; }
运行效果图如下
除了直接使用border属性一起设置style,color,width外,还能单独设置。
还可以单独设置一边,分为4组。
border-width,可以设置thin(1px),medium(3px),thick(5px),还可以直接设置具体数值的rpx。
border-style,与上面列出的一样,共10种
border-color,同上,除了直接写色值外,还可以使用内置的别名。
另外,还可以单独设置一条边,如下
设置上面top的:
border-top:
border-top-color
border-top-width
border-top-style
示例:
border-top: teal 10rpx solid;
border-top-color:teal; border-top-width: 10rpx; border-top-style: solid;
上面2种写法效果一样。
设置左边left的
border-left
border-left-color
border-left-style
border-left-width
border-left: green 10rpx solidl;
border-left-color:green; border-left-style: solid; border-left-width: 10rpx;
上面2种写法效果相同
设置下面bottom的
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom: red 10rpx solid;
border-bottom-color: red; border-bottom-style: solid; border-bottom-width: 10rpx;
上面2种写法效果相同
设置右侧right的
border-right
border-right-color
border-right-style
border-right-width
border-right: black 10rpx solid;
border-right-color: black; border-right-style: solid; border-right-width: 10rpx;
上面2种写法效果相同
除了style,width,color外,还有圆角属性
border-radius
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
border-radius: 30rpx 30rpx 30rpx 30rpx;
border-top-left-radius: 30rpx; border-top-right-radius: 30rpx; border-bottom-left-radius: 30rpx; border-bottom-right-radius: 30rpx;
上面2种写法效果相同
下面是一个示例
<view class="demo-view-2"> <text class="border-w">我是wisely_1</text> <text class="border-x">我是wisely_2</text> </view>
.demo-view-2{
background-color: white;
height: 1030rpx;
display: flex;
flex-direction: column;
justify-content: center;
}
.border-w{
border-width: medium;
border-style: solid;
border-color: gold;
/*border-radius: 30rpx 30rpx 30rpx 30rpx;*/
border-top-left-radius: 30rpx;
border-top-right-radius: 30rpx;
border-bottom-left-radius: 30rpx;
border-bottom-right-radius: 30rpx;
}
.border-x{
/*border-top: teal 10rpx solid;*/
border-top-color:teal; border-top-width: 10rpx; border-top-style: solid;
/*border-left: green 10rpx solidl;*/
border-left-color:green;
border-left-style: solid;
border-left-width: 10rpx;
/*border-bottom: red 10rpx solid;*/
border-bottom-color: red;
border-bottom-style: solid;
border-bottom-width: 10rpx;
/*border-right: black 10rpx solid;*/
border-right-color: black;
border-right-style: solid;
border-right-width: 10rpx;
margin-top: 100rpx;
}
border-image属性
该属性也有一系列子属性,不过经测试,没有效果,暂时不列。box-shadow属性
box-shadow属性的设置有6个值,最后一个可以不设置设置水平方向阴影偏移量。
设置垂直方向阴影偏移量。
设置对象的阴影模糊值。不允许为负值
设置对象的阴影外延值,不允许为负值
color。
inset=阴影在左上位置,不设置这个值,阴影在右下方
为一个text设置如下样式
.border-w{ margin: auto; background-color: tan; width: 300rpx; height: 300rpx; text-align: center; box-shadow: 20rpx 20rpx 0rpx 20rpx #ff0000 inset; }
效果图如下
相关文章推荐
- 微信小程序开发手记之二:属性display
- 微信小程序开发手记之二:属性display
- 微信小程序开发手记之五:组件
- 微信小程序开发手记和大众点评实战系列
- 微信小程序开发手记之六:API
- 微信小程序开发手记之八:一个小程序上线后的总结(下)
- 微信小程序开发手记《一》:项目的代码结构
- 微信小程序开发display:flex属性的学习
- 微信小程序开发手记之七:一个小程序上线后的总结(上)
- 微信小程序开发手记之四:视图容器
- 微信小程序开发手记之一:项目的代码结构
- 微信插件开发手记-聊天界面传送任意类型文件
- 微信/易信公共平台开发(三):记录用户状态,优化程序结构
- 【原创】《Linux高级程序设计》杨宗德著 - 进程管理与程序开发 - 进程资源及属性
- 【原创】《Linux高级程序设计》杨宗德著 - 进程管理与程序开发 - 进程资源及属性
- 【Ubuntu手记】开发多线程程序时在eclipse中添加libpthread.a库
- nolast属性---精通android、IOS App应用服务程序开发
- 如何在微信公众帐号开发模式下,通过程序代码向用户发送符号表情。
- 平台程序微信平台开发应用的签名
- 微信内网页支付开发手记