基本样式 ​

简介 ​

介绍 Tenon中的基础样式，表述一些暂不支持的 Web样式。

盒模型 ​

Tenon Vue 的盒模型是基于 Yoga布局引擎 的盒模型，每一个视图元素都是一个标准的盒子。Tenon Vue的盒模型的box-sizing类似于 Web端的 border-box, 盒子的宽高包含内容，内边距和边框， 不包含外边距。

其盒模型如下所示：

内边距 ​

padding: {height} 设置内边距，默认值为0，支持简写，也可拆解来写。

• padding: {height}
• padding-left:${height} 左侧内边距, 默认值为 0
• padding-top:${height} 上侧内边距，默认值为0
• padding-right:${height} 右侧内边距，默认值为0
• padding-bottom:${height} 下侧内边距，默认值为0

Height 单位参考高度单位

外边距 ​

margin: {height} 设置外边距，默认值为0，支持简写，也可拆解来写。

• margin: {height}
• margin-left:${height} 左侧外边距, 默认值为 0
• margin-top:${height} 上侧外边距，默认值为0
• margin-right:${height} 右侧外边距，默认值为0
• margin-bottom:${height} 下侧外边距，默认值为0

Height 单位参考高度单位

边框 ​

border ​

边框的聚合属性

border-style ​

设定边框的样式

• border-style:{string}
• border-left-style:${string} 左边框样式，默认 solid
• border-top-style:${string} 顶部边框样式，默认 solid
• border-right-style:${string} 顶部边框样式，默认 solid
• border-bottom-style:${string} 底部边框样式，默认 solid

支持的值如下

• none 不展示边框
• solid 线型边框
• dashed 方形虚线边框
• dotted 圆点虚线边框

border-width ​

设定边框的宽度，如果四个边框的宽度不同，可以分别设置

• border-width:{width}
• border-left-width:{width} 左边框宽度，默认 0
• border-top-width:{width} 顶部边框宽度，默认 0
• border-right-width:{width} 顶部边框宽度，默认 0
• border-bottom-width:{width} 底部边框宽度，默认 0

Width 单位参考宽度单位

border-color ​

设定边框的颜色，如果四个边框的颜色不同，可以分别设置

• border-color:{Color}
• border-left-color:{Color} 左边框颜色，默认 #000000
• border-top-color:{Color} 顶部边框颜色，默认 #000000
• border-right-color:{Color} 顶部边框颜色，默认 #000000
• border-bottom-color:{Color} 底部边框颜色，默认 #000000

Color 单位参考颜色

border-radius ​

设定边框的圆角，如果四个边框的圆角不同，可以分别设置

• border-radius:{radius}
• border-top-left-radius:{radius} 左上角圆角，默认 0
• border-top-right-radius:{radius} 右上角圆角，默认 0
• border-bottom-left-radius:{radius} 左下角圆角，默认 0
• border-bottom-right-radius:{radius} 右上角圆角，默认 0

Radius单位参考圆角单位

盒阴影 ​

box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color> 各属性介绍：

Color 单位参考颜色

offset、radius 等参考 单位

示例

box-shadow: .5rem .5rem .3rem red;
box-shadow: .5rem .5rem .7rem .3rem #AA0000;

背景 ​

设定盒模型背景

background-color ​

设定盒模型背景色 background-color: ${color}

Color 单位参考颜色

TODO渐变色补充

background-image ​

设定盒模型背景图片 background-image: ${string}

背景图片的设定的几种类别

background-size ​

设定背景图片的尺寸

Warning: 暂不支持

background-position ​

设定背景图片的位置

Warning: 暂不支持

background-repeat ​

设定如何重复背景图像

Warning: 暂不支持

background-origin ​

设定背景图片的定位区域

Warning: 暂不支持

background-clip ​

规定背景的绘制区域

Warning: 暂不支持

background-attachment ​

设定背景图像是否固定或者随着页面的其余部分滚动

Warning: 暂不支持

文本属性 ​

Warning: 只能作用在 text 元素上

color ​

color: ${color} 设定字体颜色

Color 单位参考颜色

font-size ​

font-size: ${size} 设定字体大小

Size 单位参考单位

font-weight ​

font-weight: ${string} 设定字体粗细 支持的值

• normal 正常
• bold 粗

transform ​

示例： transform: translate(150px 200px) rotate(20);