html5添加渐变背景,HTML5 随机生成渐变背景方案

CSS

语言：

CSSSCSS

确定

@charset "UTF-8";

.history {

text-align: center;

display: inline-block;

}

.history > span {

position: relative;

display: inline-block;

width: 2em;

height: 2em;

border-radius: 1em;

box-shadow: 0 0 0 .1em, 0 .3em 1em -.3em #000;

margin: .5em;

}

.clear {

background: rgba(0, 0, 0, 0.6);

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

.clear::after {

content: '×';

position: absolute;

top: 50%;

left: 50%;

font-family: monospace;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

font-size: 2em;

}

.info {

margin-bottom: 1em;

-webkit-box-flex: 1;

-webkit-flex: 1;

-ms-flex: 1;

flex: 1;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

pointer-events: none;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

.info > div {

background: rgba(0, 0, 0, 0.25);

line-height: 0;

padding: 1.2em;

border-radius: 2em;

pointer-events: auto;

}

.info:hover {

-webkit-user-select: auto;

-moz-user-select: auto;

-ms-user-select: auto;

user-select: auto;

}

body {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

padding: 0;

margin: 0;

color: #fff;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

font-size: 2vmax;

}

* {

box-sizing: border-box;

}

html,

body {

height: 100%;

font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;

}