15种基础的可以直接使用的CSS3样式
15种基础的可以直接使用的CSS3样式
本篇文章将列出一些基础简单的CSS3样式，你可以把它们放在手边，需要用的时候随时拿过来修改成自己的风格就可以使用。为了使我们得CSS3样式可以重复使用，我把它们写成一个个class，收集并把它们分类如link,input,text等等。
文中很多地方用到了rgba()给color赋值，rgba中前三个值是正常的rgb值，最后一个是透明度alpha值。
点击这里查看一个不错的css3手册！下面开始我们的正题。
1.定向盒阴影
Top
Right
Bottom
Left
.drop-shadow.top {
box-shadow: 0 -4px 2px -2px rgba(0,0,0,0.4);
}
.drop-shadow.right {
box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4);
}
.drop-shadow.bottom {
box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4);
}
.drop-shadow.left {
box-shadow: -4px 0 2px -2px rgba(0,0,0,0.4);
}
2.强调盒阴影，很不错的效果
Dark
Light
Inset
Border
.emphasize-dark {
box-shadow: 0 0 5px 2px rgba(0,0,0,.35);
}
.emphasize-light {
box-shadow: 0 0 0 10px rgba(255,255,255,.25);
}
.emphasize-inset {
box-shadow: inset 0 0 7px 4px rgba(255,255,255,.5);
}
.emphasize-border {
box-shadow: inset 0 0 0 7px rgba(255,255,255,.5);
}
3.浮雕效果的盒阴影
Light
Heavy
.embossed-light {
border: 1px solid rgba(0,0,0,0.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.embossed-heavy {
border: 1px solid rgba(0,0,0,0.1);
box-shadow:
inset 0 2px 3px rgba(255,255,255,0.3),
inset 0 -2px 3px rgba(0,0,0,0.3),
0 1px 1px rgba(255,255,255,0.9);
}
4.CSS3渐变效果
Light Linear
Dark Linear
Light Radial
Dark Radial
.gradient-light-linear {
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
}
.gradient-dark-linear {
background-image: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));
}
.gradient-light-radial {
background-image: radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));
}
.gradient-dark-radial {
background-image: radial-gradient(center 0, circle farthest-corner, rgba(0,0,0,0.15), rgba(0,0,0,0));
}
5.圆角
Light
Heavy
Full
.light-rounded {
border-radius: 3px;
}
.heavy-rounded {
border-radius: 8px;
}
.full-rounded {
border-radius: 50%;
}
.barrel-rounded {
border-radius: 20px/60px;
}
6.内嵌背景的超链接
This is some dummy text to show an 内嵌背景链接.
.inline-link-1 {
display: inline-block;
margin: 0 0.2em;
padding: 3px;
background: #97CAF2;
border-radius: 2px;
transition: all 0.3s ease-out;
/* Font styles */
text-decoration: none;
font-weight: bold;
color: white;
}
.inline-link-1:hover { background: #53A7EA; }
.inline-link-1:active { background: #C4E1F8; }
.inline-link-1:visited { background: #F2BF97; }
7.带下划线超链接
This is some dummy text to show an 下划线链接.
.inline-link-2 {
display: inline-block;
border-bottom: 1px dashed rgba(0,0,0,0.4);
/* Font styles */
text-decoration: none;
color: #777;
}
.inline-link-2:hover { border-bottom-style: dotted; }
.inline-link-2:active { border-bottom-style: solid; }
.inline-link-2:visited { border-bottom: 1px solid #97CAF2; }
8.带三角指示器的超链接
This is some dummy text to show an 三角指示器链接.
.inline-link-3 {
display: inline-block;
position: relative;
padding-left: 6px;
/* Font styles */
text-decoration: none;
color: #6AB3EC;
text-shadow: 0 1px 1px rgba(255,255,255,0.9);
}
.inline-link-3:hover {
color: #3C9CE7;
}
.inline-link-3:before {
content: "\25BA";
font-size: 80%;
display: inline-block;
padding-right: 3px;
pointer-events: none;
}
.inline-link-3:hover:before {
color: #F2BF97;
}
9.阴影样式的超链接
.metro {
display: inline-block;
padding: 10px;
margin: 10px;
background: #08C;
/* Font styles */
color: white;
font-weight: bold;
text-decoration: none;
}
.metro:hover { background: #0AF; }
.metro.three-d {
position: relative;
box-shadow:
1px 1px #53A7EA,
2px 2px #53A7EA,
3px 3px #53A7EA;
transition: all 0.1s ease-in;
}
.metro.three-d:active {
box-shadow: none;
top: 3px;
left: 3px;
}
10.带边框的超链接
.bordered-link {
display: inline-block;
padding: 8px;
border: 3px solid #FCB326;
border-radius: 6px;
box-shadow:
0 2px 1px rgba(0, 0, 0, 0.2),
inset 0 2px 1px rgba(0, 0, 0, 0.2);
/* Font styles */
text-decoration: none;
font-size: 14px;
text-transform: uppercase;
color: #222;
}
.bordered-link:hover { border-color: #FDD68B; }
.bordered-link:active { border-color: #FEE8BD; }
11.一些按钮样式
.modern {
display: inline-block;
margin: 10px;
padding: 8px 15px;
background: #B8ED01;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 4px;
transition: all 0.3s ease-out;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.5),
0 2px 2px rgba(0,0,0,0.3),
0 0 4px 1px rgba(0,0,0,0.2);
/* Font styles */
text-decoration: none;
text-shadow: 0 1px rgba(255,255,255,0.7);
}
.modern:hover { background: #C7FE0A; }
.embossed-link {
box-shadow:
inset 0 3px 2px rgba(255,255,255,.22),
inset 0 -3px 2px rgba(0,0,0,.17),
inset 0 20px 10px rgba(255,255,255,.12),
0 0 4px 1px rgba(0,0,0,.1),
0 3px 2px rgba(0,0,0,.2);
}
.modern.embossed-link {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.5),
0 2px 2px rgba(0,0,0,0.3),
0 0 4px 1px rgba(0,0,0,0.2),
inset 0 3px 2px rgba(255,255,255,.22),
inset 0 -3px 2px rgba(0,0,0,.15),
inset 0 20px 10px rgba(255,255,255,.12),
0 0 4px 1px rgba(0,0,0,.1),
0 3px 2px rgba(0,0,0,.2);
}
.modern.embossed-link:active {
box-shadow:
inset 0 -2px 1px rgba(255,255,255,0.2),
inset 0 3px 2px rgba(0,0,0,0.12);
}
.socle {
position: relative;
z-index: 2;
}
.socle:after {
content: "";
z-index: -1;
position: absolute;
border-radius: 6px;
box-shadow:
inset 0 1px 0 rgba(0,0,0,0.1),
inset 0 -1px 0 rgba(255,255,255,0.7);
top: -6px; bottom: -6px;
right: -6px; left: -6px;
background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0));
}
12.简单的输入框样式
.simple-input {
display: block;
padding: 5px;
border: 4px solid #F1B720;
border-radius: 5px;
color: #333;
transition: all 0.3s ease-out;
}
.simple-input:hover { border-radius: 8px; }
.simple-input:focus {
outline: none;
border-radius: 8px;
border-color: #EBD292;
}
13.Mac样式的输入框
.mac {
display: block;
border: none;
border-radius: 20px;
padding: 5px 8px;
color: #333;
box-shadow:
inset 0 2px 0 rgba(0,0,0,.2),
0 0 4px rgba(0,0,0,0.1);
}
.mac:focus {
outline: none;
box-shadow:
inset 0 2px 0 rgba(0,0,0,.2),
0 0 4px rgba(0,0,0,0.1),
0 0 5px 1px #51CBEE;
}
14.带有深度和渐变效果的输入框
.depth {
display: block;
border: 1px solid silver;
background: linear-gradient(#eee, #fff);
transition: all 0.3s ease-out;
padding: 5px;
color: #555;
}
.depth:focus {
outline: none;
background-position: 0 -1.7em;
}
15.只有一条线的输入框
.line {
display: block;
border: none;
color: #333;
background: transparent;
border-bottom: 1px dotted black;
padding: 5px 2px 0 2px;
}
.line:focus {
outline: none;
border-color: #51CBEE;
}原文来自：http://www.cnblogs.com/cgtianyi/archive/2013/04/10/3011502.html
