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

Barrel

.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