Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
627213f6
D
Docs
项目概览
OpenHarmony
/
Docs
1 年多 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
提交
627213f6
编写于
4月 24, 2022
作者:
Y
yaoyuchi
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
修改box-sizing属性的描述
Signed-off-by:
N
yaoyuchi
<
yaoyuchi@huawei.com
>
上级
23ffa54f
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
2 addition
and
3 deletion
+2
-3
zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md
...ion-dev/reference/arkui-js/js-components-common-styles.md
+2
-3
未找到文件。
zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md
浏览文件 @
627213f6
...
@@ -63,7 +63,7 @@
...
@@ -63,7 +63,7 @@
| border-image-outset
<sup>
7+
</sup>
|
<
length
>
\|
<
percentage
>
| 0 | 指定边框图像可超出边框的大小。
<br/>
指定一个值时,边框图像在四个方向超出边框的距离。
<br/>
指定两个值时,第一个值指定上下两边的边框图像超出边框的距离,第二个指定左右两边的
。
<br/>
指定三个值时,第一个指定上边的边框图像超出边框的距离
,第二个指定左右两边的边框图像超出边框的距离
,第三个指定下边的边框图像超出边框的距离
。
<br/>
指定四个值时分别为上、右、下、左边的边框图像超出边框的距离
(顺时针顺序)。 |
| border-image-outset
<sup>
7+
</sup>
|
<
length
>
\|
<
percentage
>
| 0 | 指定边框图像可超出边框的大小。
<br/>
指定一个值时,边框图像在四个方向超出边框的距离。
<br/>
指定两个值时,第一个值指定上下两边的边框图像超出边框的距离,第二个指定左右两边的
。
<br/>
指定三个值时,第一个指定上边的边框图像超出边框的距离
,第二个指定左右两边的边框图像超出边框的距离
,第三个指定下边的边框图像超出边框的距离
。
<br/>
指定四个值时分别为上、右、下、左边的边框图像超出边框的距离
(顺时针顺序)。 |
| border-image-repeat
<sup>
7+
</sup>
| string | stretch | 定义图片如何填充边框。
<br/>
stretch:
拉伸图片以填充边框。
<br/>
repeat:平铺图片以填充边框。
<br/>
round:平铺图像。当不能整数次平铺时,根据情况放大或缩小图像。
<br/>
|
| border-image-repeat
<sup>
7+
</sup>
| string | stretch | 定义图片如何填充边框。
<br/>
stretch:
拉伸图片以填充边框。
<br/>
repeat:平铺图片以填充边框。
<br/>
round:平铺图像。当不能整数次平铺时,根据情况放大或缩小图像。
<br/>
|
| border-image
<sup>
7+
</sup>
| string | - | 简写属性,可以选择以下两种设置方式:
<br/>
-
设置图片边框的每个属性。包含图像的边界向内偏移,图像边界的宽度,边框图像可超出边框盒的大小,图片如何填充边框,顺序设置为
border-image-source
,border-image-slice,border-image-width,border-image-outset,border-image-repeat,不设置的值为默认值。
<br/>
-
渐变色边框
<br/>
示例:
<br/>
border-image:
linear-gradient(red,
yellow)
10px |
| border-image
<sup>
7+
</sup>
| string | - | 简写属性,可以选择以下两种设置方式:
<br/>
-
设置图片边框的每个属性。包含图像的边界向内偏移,图像边界的宽度,边框图像可超出边框盒的大小,图片如何填充边框,顺序设置为
border-image-source
,border-image-slice,border-image-width,border-image-outset,border-image-repeat,不设置的值为默认值。
<br/>
-
渐变色边框
<br/>
示例:
<br/>
border-image:
linear-gradient(red,
yellow)
10px |
| box-sizing
<sup>
8+
</sup>
| string | border-box | -border-box:你想要设置的边框和内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含它的border和padding,内容区的实际宽度是width减去(border + padding)的值。大多数情况下,这使得我们更容易地设定一个元素的宽高。
<br
/>
-content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
<br
/>
示例:
<br
/>
box-sizing: border-box
\|
content-box
<br
/>
|
| box-sizing
<sup>
9+
</sup>
| string | border-box | 设置组件的边框类型。
<br/>
content-box:标准盒子模型。设置的width和height只包含内容的宽和高,不包含边框(border)和内边距(padding)。
<br/>
border-box:设置的width和height包含内容,边框(border)和内边距(padding),即:组件内容区的实际宽度 = width - (border + padding) 。
|
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
...
@@ -71,7 +71,7 @@
...
@@ -71,7 +71,7 @@
## 示例
## 示例
-
box-sizing
###
box-sizing
```html
```html
<div class="container" onswipe="touchMove">
<div class="container" onswipe="touchMove">
...
@@ -84,6 +84,5 @@
...
@@ -84,6 +84,5 @@
</div>
</div>
```
```
-
运行效果:
![
zh-cn_image_0000001214837129
](
figures/zh-cn_image_0000001214837129.png
)
![
zh-cn_image_0000001214837129
](
figures/zh-cn_image_0000001214837129.png
)
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录