微信小程序开发手记之三：backgroud和border属性

Posted 2022-11-30 王梵

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序开发手记之三：backgroud和border属性相关的知识，希望对你有一定的参考价值。

先来看一段样式，在wxss中

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;

效果图如下

以上是关于微信小程序开发手记之三：backgroud和border属性的主要内容，如果未能解决你的问题，请参考以下文章

微信小程序开发手记之四：视图容器

微信小程序开发手记之二：属性display

微信小程序开发手记之六：API

微信小程序开发手记之五：组件

微信小程序开发手记之六：API