整理常用的css樣式

背景色漸變
background-image: linear-gradient(90deg, #eddcb9 0%,#bd9c66 51%,#8a603a 100%);

邊框漸變
border-style:solid;
    border-width:1px;
    border-image:-webkit-linear-gradient(to bottom,#e9b15f,#fef9f3,#e9b160) 1 10;
    border-image: -moz-linear-gradient(to bottom,#e9b15f,#fef9f3,#e9b160) 1 10;
    border-image: -ms-linear-gradient(to bottom,#e9b15f,#fef9f3,#e9b160) 1 10;
    border-image:linear-gradient(to bottom,#e9b15f,#fef9f3,#e9b160) 1 10;

字體漸變：
background-image: linear-gradient(270deg, #6d50fb 0%,#5ba8fc 100%);
        -webkit-text-fill-color: transparent;/*填充透明顏色*/
        -webkit-background-clip: text;/*背景剪裁*/

表單原件去掉選中邊框：
outline:none;

去掉蘋果手機自帶按鈕樣式：
input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; }

字體兩端對齊：
width:4rem;text-align:justify;text-align-last: justify;

div360度旋轉:
.xuanzhun{
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
    -webkit-animation: rotate 5s linear infinite;
    -moz-animation: rotate 5s linear infinite;
    -o-animation: rotate 5s linear infinite;
    animation: rotate 5s linear infinite;
}
@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
    to{-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
    to{-moz-transform: rotate(359deg)}
}
@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
    to{-o-transform: rotate(359deg)}
}
@keyframes rotate{from{transform: rotate(0deg)}
    to{transform: rotate(359deg)}
}

縮小放大效果：
.add_transform{
    display: block;
    transform:scale(0,0);
    -ms-transform:scale(0,0);/* IE9 */
    -moz-transform:scale(0,0);/* Firefox */
    -webkit-transform:scale(0,0);/* Safari和Chrome */
    -o-transform:scale(0,0);/* Opera */
    transition:all 1s;
    -moz-transition:all 1s; /* Firefox 4 */
    -webkit-transition:all 1s; /* Safari and Chrome */
    -o-transition:all 1s; /* Opera */
}
.dishb{
    transform:scale(1,1);
   -ms-transform:scale(1,1);/* !* IE9 */
    -moz-transform:scale(1,1);/* Firefox */
    -webkit-transform:scale(1,1);/* Safari和Chrome */
}

css 文本兩行顯示，超出省略號表示
 //一行
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
//兩行
 text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;

transform 屬性將div傾斜
transform:rotate(288deg);
-ms-transform:rotate(288deg);     /* IE 9 */
-moz-transform:rotate(288deg);     /* Firefox */
-webkit-transform:rotate(288deg); /* Safari 和 Chrome */
-o-transform:rotate(288deg);     /* Opera */