css3动画 mignon_一款带左边框的CSS3信息提示框

CSS

语言：

CSSSCSS

确定

@charset "UTF-8";

.message {

background-color: white;

width: calc(100% - 3em);

max-width: 24em;

padding: 1em 1em 1em 1.5em;

border-left-width: 6px;

border-left-style: solid;

border-radius: 3px;

position: relative;

line-height: 1.5;

}

.message + .message {

margin-top: 2em;

}

.message:before {

color: white;

width: 1.5em;

height: 1.5em;

position: absolute;

top: 1em;

left: -3px;

border-radius: 50%;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

font-weight: bold;

line-height: 1.5;

text-align: center;

}

.message p {

margin: 0 0 1em;

}

.message p:last-child {

margin-bottom: 0;

}

.message--error {

border-left-color: firebrick;

}

.message--error:before {

background-color: firebrick;

content: "‼";

}

.message--warning {

border-left-color: darkorange;

}

.message--warning:before {

background-color: darkorange;

content: "!";

}

.message--success {

border-left-color: darkolivegreen;

}

.message--success:before {

background-color: darkolivegreen;

content: "✔";

}

html {

box-sizing: border-box;

}

*,

*:before,

*:after {

box-sizing: inherit;

}

html {

height: 100%;

}

body {

background-color: gray;

min-height: 100%;

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;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

}