15种基础的可以直接使用的CSS3样式

本篇文章将列出一些基础简单的CSS3圆角,阴影,渐变,transform等样式,你可以把它们放在手边,需要用的时候随时拿过来修改成自己的风格就可以使用。为了使我们得CSS3样式可以重复使用,我把它们写成一个个class,并把它们分类如links,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;
}
						


1 评论

  1. Paris   •  

    Wonderful exapanltion of facts available here.

Paris进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>