# 通用样式

<style scoped>
  .panel {
    margin: 10px;
    top:10px;
    align-items: center;
    justify-content: center;
    border: solid;
    border-radius: 10px;
    transition-property: width, height, background-color;
    transition-duration: 0.3s;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
  }
</style>

<template>
  <div class="wrapper">
    <div class="transform">
     <text class="title">Transformed element</text>
    </div>
  </div>
</template>
<style>
  .transform {
    align-items: center;
    transform: translate(150px, 200px) rotate(20deg);
    transform-origin: 0 -250px;
    border-color:red;
    border-width:2px;
  }
  .title {font-size: 48px;}
</style>

0.9.5 eeui 支持四种伪类：active, focus, disabled, enabled 所有组件都支持 active, 但只有 input 组件和 textarea 组件支持 focus, enabled, disabled。 ### # 规则 - 同时生效的时候，优先级高覆盖优先级低 - 例如：input:active:enabled 和 input:active 同时生效，前者覆盖后者 - 互联规则如下所示 示例 ## # 线性渐变 0.10+ eeui 支持线性渐变背景，具体介绍可参考 CSS 渐变介绍。 所有组件均支持线性渐变。 ### # 使用 你可以通过 background-image 属性创建线性渐变。

background-image: linear-gradient(to top, #a80077, #66ff00);

目前暂不支持 radial-gradient（径向渐变）。 eeui 目前只支持两种颜色的渐变，渐变方向如下： - to right：从左向右渐变 - to left：从右向左渐变 - to bottom：从上到下渐变 - to top：从下到上渐变 - to bottom right：从左上角到右下角 - to top left：从右下角到左上角 WARNING - background-image 优先级高于 background-color，这意味着同时设置 background-image 和 background-color，background-color 被覆盖。 - background 不支持简写。 示例 ## # 阴影(box-shadow) 0.11+ eeui 支持 box-shadow 属性用于设置元素阴影。 ### # 注意 WARNING - 目前仅 iOS 支持 box-shadow 属性，Android 暂不支持，可以使用图片代替。 - 每个元素只支持设置一个阴影效果，不支持多个阴影同时作用于一个元素。 ### # 参数 - inset（可选） 默认阴影在边框外。使用 inset 后，阴影在边框内（即使是透明边框），背景之上内容之下。 - px 单位长度值，用来设置阴影偏移量。 设置水平偏移量，如果是负值则阴影位于元素左边。 设置垂直偏移量，如果是负值则阴影位于元素上面。如果两者都是 0，那么阴影位于元素后面。这时如果设置了 或 则有模糊效果。 - px 单位长度值，用来设置阴影偏移量。 设置水平偏移量，如果是负值则阴影位于元素左边。 设置垂直偏移量，如果是负值则阴影位于元素上面。如果两者都是 0，那么阴影位于元素后面。这时如果设置了 或 则有模糊效果。 - 设置模糊半径，px 单位长度值，值越大，模糊面积越大，阴影就越大越淡。不能为负值。默认为0，此时阴影边缘锐利。 - 设置阴影颜色，可参考 CSS 颜色单位。 示例 ## # 其他基本样式 - opacity {number}：取值范围为 [0, 1] 区间。默认值是 1，即完全不透明；0 是完全透明；0.5 是 50% 的透明度。 - background-color {color}：设定元素的背景色，可选值为色值，支持RGB（ rgb(255, 0, 0) ）；RGBA（ rgba(255, 0, 0, 0.5) ）；十六进制（ #ff0000 ）；精简写法的十六进制（ #f00 ）；色值关键字（red），默认值是 transparent 。 注意： 色值的关键字列表。 ## # 上手样式 如果对于样式写法需要更多上手参考，可参考每个组件的文档中，都有常见的例子可供参考。 你可以按照以下步骤来规划 eeui 页面的样式。 - 全局样式规划：将整个页面分割成合适的模块。 - flex 布局：排列和对齐页面模块。 - 定位盒子：定位并设置偏移量。 - 细节样式处理：增加特定的具体样式。 在 GitHub 上编辑此页

最后一次更新: 6/7/2019, 8:03:58 AM

← 升级程序 文本样式 →