提示框的样式拟物的效果是从一个博客网站上学习到的 – 爱CSS

关闭边栏(ESC)打开边栏(ESC)

这二种提示框的效果挺好看的，记录一下吧，现在改用的是拟物化的效果，有点立体感，之前用的这种是扁平风格的。

有点立体感的提示框

.infobox, .successbox, .warningbox, .errorbox {
    display:block;
    font-size:16px;
    margin: 20px 0;
    padding:12px 20px;
    position:relative;
    line-height:1.9;
    border-radius: 10px;
    color: #fff;
}
.infobox:before, .successbox:before, .warningbox:before, .errorbox:before {
    font-family:'FontAwesome';
	border-radius: 50%;
	color: #fff;
	font-size: 12px;
	position: absolute;
	width: 24px;
	height: 24px;
	line-height: 24.5px;
	left: -12px;
	top: -12px;
	-webkit-box-shadow: 0 0 0 2.5px #fff;
	text-align: center;
}
.infobox {
    background:linear-gradient(90deg,#20a0ff,#20b8ff);
    box-shadow: 0 3px 5px rgba(32,160,255,.5);
    text-shadow: 0 -1px #20a0ff;
}
.successbox {
    background: linear-gradient(90deg,#61be33,#8fce44);
    text-shadow: 0 -1px #61be33;
    box-shadow: 0 3px 5px rgba(104,195,59,.5);
}
.warningbox {
    background:linear-gradient(90deg,#ff953f,#ffb449);
    box-shadow: 0 3px 5px rgba(255,154,73,.5);
    text-shadow: 0 -1px #ff953f;
}
.errorbox {
    background: linear-gradient(90deg,#ff4949,#ff7849);
    box-shadow: 0 3px 5px rgba(255,73,73,.5);
    text-shadow: 0 -1px #ff4949;
}
.infobox:before {
	background: -webkit-gradient(linear,left bottom,left top,from(#0092ff),to(#20b8ff));
	background: -webkit-linear-gradient(bottom,#0092ff,#20b8ff);
	background: linear-gradient(0deg,#0092ff,#20b8ff);
    content:'\f129';
    text-shadow: 0 -1px #20a0ff;
}
.successbox:before {
	background: -webkit-gradient(linear,left bottom,left top,from(#52bb1d),to(#95d34b));
	background: -webkit-linear-gradient(bottom,#52bb1d,#95d34b);
	background: linear-gradient(0deg,#52bb1d,#95d34b);
	content: "\f00c";
	text-shadow: 0 -1px #61be33;
}
.warningbox:before {
	background: -webkit-gradient(linear,left bottom,left top,from(#ff8f35),to(#ffc149));
	background: -webkit-linear-gradient(bottom,#ff8f35,#ffc149);
	background: linear-gradient(0deg,#ff8f35,#ffc149);
	content: "\f12a";
	text-shadow: 0 -1px #ff953f;
}
.errorbox:before {
	background: -webkit-gradient(linear,left bottom,left top,from(#ff3838),to(#ff7849));
	background: -webkit-linear-gradient(bottom,#ff3838,#ff7849);
	background: linear-gradient(0deg,#ff3838,#ff7849);
	content: "\f00d";
	text-shadow: 0 -1px #ff4949;
}

.infobox, .successbox, .warningbox, .errorbox {

display:block;

font-size:16px;

margin: 20px 0;

padding:12px 20px;

position:relative;

line-height:1.9;

border-radius: 10px;

color: #fff;

}

.infobox:before, .successbox:before, .warningbox:before, .errorbox:before {

font-family:'FontAwesome';

border-radius: 50%;

color: #fff;

font-size: 12px;

position: absolute;

width: 24px;

height: 24px;

line-height: 24.5px;

left: -12px;

top: -12px;

-webkit-box-shadow: 0 0 0 2.5px #fff;

text-align: center;

}

.infobox {

background:linear-gradient(90deg,#20a0ff,#20b8ff);

box-shadow: 0 3px 5px rgba(32,160,255,.5);

text-shadow: 0 -1px #20a0ff;

}

.successbox {

background: linear-gradient(90deg,#61be33,#8fce44);

text-shadow: 0 -1px #61be33;

box-shadow: 0 3px 5px rgba(104,195,59,.5);

}

.warningbox {

background:linear-gradient(90deg,#ff953f,#ffb449);

box-shadow: 0 3px 5px rgba(255,154,73,.5);

text-shadow: 0 -1px #ff953f;

}

.errorbox {

background: linear-gradient(90deg,#ff4949,#ff7849);

box-shadow: 0 3px 5px rgba(255,73,73,.5);

text-shadow: 0 -1px #ff4949;

}

.infobox:before {

background: -webkit-gradient(linear,left bottom,left top,from(#0092ff),to(#20b8ff));

background: -webkit-linear-gradient(bottom,#0092ff,#20b8ff);

background: linear-gradient(0deg,#0092ff,#20b8ff);

content:'\f129';

text-shadow: 0 -1px #20a0ff;

}

.successbox:before {

background: -webkit-gradient(linear,left bottom,left top,from(#52bb1d),to(#95d34b));

background: -webkit-linear-gradient(bottom,#52bb1d,#95d34b);

background: linear-gradient(0deg,#52bb1d,#95d34b);

content: "\f00c";

text-shadow: 0 -1px #61be33;

}

.warningbox:before {

background: -webkit-gradient(linear,left bottom,left top,from(#ff8f35),to(#ffc149));

background: -webkit-linear-gradient(bottom,#ff8f35,#ffc149);

background: linear-gradient(0deg,#ff8f35,#ffc149);

content: "\f12a";

text-shadow: 0 -1px #ff953f;

}

.errorbox:before {

background: -webkit-gradient(linear,left bottom,left top,from(#ff3838),to(#ff7849));

background: -webkit-linear-gradient(bottom,#ff3838,#ff7849);

background: linear-gradient(0deg,#ff3838,#ff7849);

content: "\f00d";

text-shadow: 0 -1px #ff4949;

}

扁平风格提示框

.infobox, .successbox, .warningbox, .errorbox {
    display:block;
    font-size:14px;
    margin:20px 0 8px 0;
    padding:12px 12px 12px 46px;
    position:relative;
    border-left-width:3px;
    border-left-style:solid;
    line-height:28px
}
.infobox:before, .successbox:before, .warningbox:before, .errorbox:before {
    font-family:'FontAwesome';
    display:block;
    width:32px;
    height:32px;
    position:absolute;
    left:14px;
    top:calc(50% - 16px);
    font-size:24px;
    color:#999;
    line-height:32px
}
.infobox {
    background-color:#effaff;
    border-color:#6dcff6;
    color:#6dcff6
}
.successbox {
    background-color:#e7f6f0;
    border-color:#2fba87;
    color:#2fba87
}
.warningbox {
    background-color:#fffbf0;
    border-color:#ffc11b;
    color:#ffc11b
}
.errorbox {
    background-color:#fff0ec;
    border-color:#eb5020;
    color:#eb5020
}
.infobox:before {
    content:'\f05a';
    color:#6dcff6
}
.successbox:before {
    content:'\f058';
    color:#2fba87
}
.warningbox:before {
    content:'\f06a';
    color:#ffc11b
}
.errorbox:before {
    content:'\f057';
    color:#eb5020
}

.infobox, .successbox, .warningbox, .errorbox {

display:block;

font-size:14px;

margin:20px 0 8px 0;

padding:12px 12px 12px 46px;

position:relative;

border-left-width:3px;

border-left-style:solid;

line-height:28px

}

.infobox:before, .successbox:before, .warningbox:before, .errorbox:before {

font-family:'FontAwesome';

display:block;

width:32px;

height:32px;

position:absolute;

left:14px;

top:calc(50% - 16px);

font-size:24px;

color:#999;

line-height:32px

}

.infobox {

background-color:#effaff;

border-color:#6dcff6;

color:#6dcff6

}

.successbox {

background-color:#e7f6f0;

border-color:#2fba87;

color:#2fba87

}

.warningbox {

background-color:#fffbf0;

border-color:#ffc11b;

color:#ffc11b

}

.errorbox {

background-color:#fff0ec;

border-color:#eb5020;

color:#eb5020

}

.infobox:before {

content:'\f05a';

color:#6dcff6

}

.successbox:before {

content:'\f058';

color:#2fba87

}

.warningbox:before {

content:'\f06a';

color:#ffc11b

}

.errorbox:before {

content:'\f057';

color:#eb5020

}

直接在 CSS 中引用 FONTAWESOME 图标（附码表）

CSS 2017-02-28 22

因此我们如果不想用 Fontawesome 提供的类，只想在 css 里面引用图标的话，可以这样子，这样可…

css扩大点击的有效范围

CSS 2017-04-22 7

在文章页底部的上下篇文章导航中，有个这样的问题，点击的有效范围只在链接这个小范围上，而不…

wordpress纯代码实现圆角彩色背景标签云

CSS 2017-01-16 3

苹果手机IOS设备对meta定义的私有属性

CSS 2017-02-12 1

多个半透明层切换的首页效果

CSS 2017-02-06 5

鼠标过经图片时的遮罩效果

CSS 2017-05-20 3

酒干倘卖无-苏芮

文章页里添加音乐播放器不再悲哀演示

直接在 CSS 中引用 FONTAWESOME 图标（附码表）

css扩大点击的有效范围

wordpress纯代码实现圆角彩色背景标签云

苹果手机IOS设备对meta定义的私有属性

多个半透明层切换的首页效果

鼠标过经图片时的遮罩效果

向小宇进行回复取消回复

SQL Server 常用近百条SQL语句（收藏版）

SQL高效查询两个表不同的数据

五岁生日 | 这一年跟表姐一块庆祝生日，可心的一天了

跨域 | 百度联想词二种方式来实现

$.ajax({})方法success，error，complete，beforeSend

酒干倘卖无-苏芮

文章页里添加音乐播放器 不再悲哀演示

向小宇进行回复 取消回复

文章页里添加音乐播放器不再悲哀演示

向小宇进行回复取消回复