diff --git a/demo.html b/demo.html
index 20808e0f0..42110f141 100644
--- a/demo.html
+++ b/demo.html
@@ -8,6 +8,8 @@
           href="./dist/core.css"/>
     <link rel="stylesheet" type="text/css"
           href="./dist/base.css"/>
+    <link rel="stylesheet" type="text/css"
+          href="./dist/widget.css"/>
     <link rel="stylesheet" type="text/css"
           href="demo/dist/demo.css"/>
 
diff --git a/src/css/base/segment/segment.css b/src/css/base/segment/segment.css
index f00f80ed6..11ddb87d9 100644
--- a/src/css/base/segment/segment.css
+++ b/src/css/base/segment/segment.css
@@ -2,6 +2,7 @@
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
 .bi-segment > .center-element {
+  overflow: hidden;
   overflow-x: hidden;
   overflow-y: hidden;
   background: #ffffff;
diff --git a/src/css/base/single/editor/editor.textarea.css b/src/css/base/single/editor/editor.textarea.css
index 8544a6b47..150d4a224 100644
--- a/src/css/base/single/editor/editor.textarea.css
+++ b/src/css/base/single/editor/editor.textarea.css
@@ -2,6 +2,7 @@
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
 .bi-textarea-editor {
+  overflow: hidden;
   overflow-x: hidden;
   overflow-y: hidden;
 }
diff --git a/src/css/base/single/text.css b/src/css/base/single/text.css
index 0128c7c7c..34613e8aa 100644
--- a/src/css/base/single/text.css
+++ b/src/css/base/single/text.css
@@ -4,6 +4,7 @@
 .bi-text {
   text-overflow: ellipsis;
   overflow-x: hidden;
+  overflow-y: hidden;
   white-space: nowrap;
   word-break: break-all;
 }
diff --git a/src/css/lib/animate.css b/src/css/lib/animate.css
index 6f71778c1..05756ce92 100644
--- a/src/css/lib/animate.css
+++ b/src/css/lib/animate.css
@@ -2201,14 +2201,14 @@
   }
 }
 @-webkit-keyframes zoomInUp {
-  from {
+   from {
     opacity: 0;
     -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
     transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
     -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
     animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
   }
-  60% {
+   60% {
     opacity: 1;
     -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
     transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
diff --git a/src/css/utils/overflow.css b/src/css/utils/overflow.css
index a8687e25f..c7feb6550 100644
--- a/src/css/utils/overflow.css
+++ b/src/css/utils/overflow.css
@@ -36,5 +36,6 @@
 .overflow-dot {
   text-overflow: ellipsis;
   overflow-x: hidden;
+  overflow-y: hidden;
   white-space: nowrap;
 }
diff --git a/src/css/widget/base/toolbar/toolbar.progress.processor.css b/src/css/widget/base/toolbar/toolbar.progress.processor.css
index 552b25476..85df88113 100644
--- a/src/css/widget/base/toolbar/toolbar.progress.processor.css
+++ b/src/css/widget/base/toolbar/toolbar.progress.processor.css
@@ -6,6 +6,7 @@
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
+  overflow: hidden;
   overflow-x: hidden;
   overflow-y: hidden;
 }
diff --git a/src/css/widget/sequencetable/dynamicnumber.sequencetable.css b/src/css/widget/sequencetable/dynamicnumber.sequencetable.css
index 059def484..fed0aa1c3 100644
--- a/src/css/widget/sequencetable/dynamicnumber.sequencetable.css
+++ b/src/css/widget/sequencetable/dynamicnumber.sequencetable.css
@@ -2,6 +2,7 @@
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
 .bi-sequence-table-dynamic-number .sequence-table-title-cell {
+  overflow: hidden;
   overflow-x: hidden;
   overflow-y: hidden;
   -webkit-box-sizing: border-box;
diff --git a/src/css/widget/sequencetable/listnumber.sequencetable.css b/src/css/widget/sequencetable/listnumber.sequencetable.css
index bd987fced..dace5ccd1 100644
--- a/src/css/widget/sequencetable/listnumber.sequencetable.css
+++ b/src/css/widget/sequencetable/listnumber.sequencetable.css
@@ -2,6 +2,7 @@
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
 .bi-sequence-table-list-number .sequence-table-title-cell {
+  overflow: hidden;
   overflow-x: hidden;
   overflow-y: hidden;
   -webkit-box-sizing: border-box;
diff --git a/src/css/widget/sequencetable/treenumber.sequencetable.css b/src/css/widget/sequencetable/treenumber.sequencetable.css
index 616a45cfc..be1c1be2a 100644
--- a/src/css/widget/sequencetable/treenumber.sequencetable.css
+++ b/src/css/widget/sequencetable/treenumber.sequencetable.css
@@ -2,6 +2,7 @@
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
 .bi-sequence-table-tree-number .sequence-table-title-cell {
+  overflow: hidden;
   overflow-x: hidden;
   overflow-y: hidden;
   -webkit-box-sizing: border-box;
diff --git a/src/less/typographic.less b/src/less/typographic.less
index 4a2149c3f..f2cb38f7e 100644
--- a/src/less/typographic.less
+++ b/src/less/typographic.less
@@ -9,17 +9,20 @@
 }
 
 .overflow-auto(){
+  overflow: auto;
   overflow-x: auto;
   overflow-y: auto;
 }
 
 .overflow-hidden(){
+  overflow: hidden;
   overflow-x: hidden;
   overflow-y: hidden;
 }
 .overflow-dot(){
   text-overflow:ellipsis;
   overflow-x: hidden;
+  overflow-y: hidden;
   white-space:nowrap;
 }
 .user-select(@select){
diff --git a/src/less/visual.less b/src/less/visual.less
index 0e943dc42..8865353bb 100644
--- a/src/less/visual.less
+++ b/src/less/visual.less
@@ -1,37 +1,49 @@
-.text-shadow(none){
+.text-shadow(none) {
   text-shadow: none;
   -moz-text-shadow: none;
   -webkit-text-shadow: none;
 }
-.text-shadow(@x, @y, @blur, @color) when not (@x = none){
+
+.text-shadow(@x, @y, @blur, @color) when not (@x = none) {
   text-shadow: @arguments;
   -moz-text-shadow: @arguments;
   -webkit-text-shadow: @arguments;
 }
-.box-shadow(none){
+
+.box-shadow(none) {
   box-shadow: none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
 }
+
 .box-shadow(@style, @c) when (iscolor(@c)) {
   -webkit-box-shadow: @style @c;
   -moz-box-shadow: @style @c;
   box-shadow: @style @c;
 }
+
 .box-shadow(@x, @y, @blur, @spreed: 0px, @color, @inset: outset) when (iscolor(@color)) and (isnumber(unit(@spreed))){
   box-shadow: @arguments;
   -webkit-box-shadow: @arguments;
   -moz-box-shadow: @arguments;
 }
 
-.opacity(@opa){
+.opacity(@opa) {
   opacity: @opa;
-  @opa-ie:@opa*100;
+  @opa-ie: @opa*100;
   filter: ~'alpha(opacity=@{opa-ie})';
 }
+
+.transition(@transition) {
+  -webkit-transition: @transition;
+  -moz-transition: @transition;
+  -o-transition: @transition;
+  transition: @transition;
+}
+
 //渐变
-.gradient(@start, @end){
-  background: @start;        //不支持的用这个
+.gradient(@start, @end) {
+  background: @start; //不支持的用这个
   background: -webkit-gradient(linear, 0 0, 0 100%, from(@start) to(@end)); /*old webkit*/
   background: -webkit-linear-gradient(@start, @end); /*new webkit*/
   background: -moz-linear-gradient(@start, @end); /*gecko*/
@@ -40,49 +52,170 @@
   background: linear-gradient(@start, @end); /*future CSS3 browsers*/
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@{start}', endColorstr='@{end}', GradientType='0');
 }
-.border-radius(@radius: 5px){
+
+.border-radius(@radius: 5px) {
   -webkit-border-radius: @radius;
   -moz-border-radius: @radius;
   border-radius: @radius;
 }
-.border-corner-top-radius(@leftTop, @rightTop){
+
+.border-corner-top-radius(@leftTop, @rightTop) {
   -moz-border-radius-topleft: @leftTop;
   -webkit-border-top-left-radius: @leftTop;
   -moz-border-radius-topright: @rightTop;
   -webkit-border-top-right-radius: @rightTop;
 
-  border-top-left-radius:@leftTop;
-  border-top-right-radius:@rightTop;
+  border-top-left-radius: @leftTop;
+  border-top-right-radius: @rightTop;
 }
-.border-corner-bottom-radius(@leftBottom, @rightBottom){
+
+.border-corner-bottom-radius(@leftBottom, @rightBottom) {
   -moz-border-radius-bottomleft: @rightBottom;
   -webkit-border-bottom-left-radius: @rightBottom;
   -moz-border-radius-bottomright: @leftBottom;
   -webkit-border-bottom-right-radius: @rightBottom;
 
-  border-bottom-right-radius:@rightBottom;
-  border-bottom-left-radius:@leftBottom;
+  border-bottom-right-radius: @rightBottom;
+  border-bottom-left-radius: @leftBottom;
 }
-.border-corner-left-radius(@leftTop, @leftBottom){
+
+.border-corner-left-radius(@leftTop, @leftBottom) {
   -moz-border-radius-topleft: @leftTop;
   -webkit-border-top-left-radius: @leftTop;
   -moz-border-radius-bottomleft: @leftBottom;
   -webkit-border-bottom-left-radius: @leftBottom;
 
-  border-top-left-radius:@leftTop;
-  border-bottom-left-radius:@leftBottom;
+  border-top-left-radius: @leftTop;
+  border-bottom-left-radius: @leftBottom;
 }
-.border-corner-right-radius(@rightTop, @rightBottom){
+
+.border-corner-right-radius(@rightTop, @rightBottom) {
   -moz-border-radius-topright: @rightTop;
   -webkit-border-top-right-radius: @rightTop;
   -moz-border-radius-bottomright: @rightBottom;
   -webkit-border-bottom-right-radius: @rightBottom;
 
-  border-top-right-radius:@rightTop;
-  border-bottom-right-radius:@rightBottom;
+  border-top-right-radius: @rightTop;
+  border-bottom-right-radius: @rightBottom;
 }
-.border-corner-radius(@leftTop, @rightTop, @rightBottom, @leftBottom){
+
+.border-corner-radius(@leftTop, @rightTop, @rightBottom, @leftBottom) {
   -webkit-border-radius: @arguments;
   -moz-border-radius: @arguments;
   border-radius: @arguments;
+}
+
+@sideHeight: 6px;
+@sideLength: 12px;
+.solid-triangle-up(@color) {
+  width: 0;
+  height: 0;
+  border-left: (@sideLength/2) solid transparent;
+  border-right: (@sideLength/2) solid transparent;
+  border-bottom: @sideHeight solid @color;
+}
+
+.solid-triangle-down(@color) {
+  width: 0;
+  height: 0;
+  border-left: (@sideLength/2) solid transparent;
+  border-right: (@sideLength/2) solid transparent;
+  border-top: @sideHeight solid @color;
+}
+
+.solid-triangle-left(@color) {
+  width: 0;
+  height: 0;
+  border-top: (@sideLength/2) solid transparent;
+  border-right: @sideHeight solid @color;
+  border-bottom: (@sideLength/2) solid transparent;
+}
+
+.solid-triangle-right(@color) {
+  width: 0;
+  height: 0;
+  border-top: (@sideLength/2) solid transparent;
+  border-left: @sideHeight solid @color;
+  border-bottom: (@sideLength/2) solid transparent;
+}
+
+.solid-triangle-top-left(@color) {
+  width: 0;
+  height: 0;
+  border-top: @sideHeight solid @color;
+  border-right: @sideHeight solid transparent;
+}
+
+.solid-triangle-top-right(@color) {
+  width: 0;
+  height: 0;
+  border-top: @sideHeight solid @color;
+  border-left: @sideHeight solid transparent;
+}
+
+.solid-triangle-bottom-left(@color) {
+  width: 0;
+  height: 0;
+  border-bottom: @sideHeight solid @color;
+  border-right: @sideHeight solid transparent;
+}
+
+.solid-triangle-bottom-right(@color) {
+  width: 0;
+  height: 0;
+  border-bottom: @sideHeight solid @color;
+  border-left: @sideHeight solid transparent;
+}
+
+.triangle-top() {
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-bottom: 1px solid #f5f5f5;
+
+  &:before {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    border-bottom: 10px solid #ccc;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    content: "";
+  }
+  &:after {
+    position: absolute;
+    right: 1px;
+    top: 1px;
+    bottom: 0px;
+    border-bottom: 9px solid #f5f5f5;
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
+    content: "";
+  }
+}
+
+.triangle-bottom() {
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-top: 1px solid #f5f5f5;
+
+  &:after {
+    position: absolute;
+    right: 1px;
+    top: -1px;
+    border-top: 9px solid #f5f5f5;
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
+    content: "";
+  }
+  &:before {
+    position: absolute;
+    border-top: 10px solid #cccccc;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    content: "";
+  }
+
 }
\ No newline at end of file