1、鲜艳的锚链接

a {
    
 color: #00e;

}

a:visited {
    
 color: #551a8b;

}

a:hover {
    
 color: #06e;

}

a:focus {
    
 outline: thin dotted;

}

a:hover, a:active {
    
 outline: 0;

}

a, a:visited, a:active {
    
 text-decoration: none;
    
 color: #fff;
    
 -webkit-transition: all .3s ease-in-out;

}

a:hover, .glow {
    
 color: #ff0;
    
 text-shadow: 0 0 10px #ff0;

}

2、论文页面的卷曲效果

ul.box {
    
 position: relative;
    
 z-index: 1;
     /* prevent shadows falling behind containers with backgrounds */
 overflow: hidden;
    
 list-style: none;
    
 margin: 0;
    
 padding: 0;
 
}

ul.box li {
    
 position: relative;
    
 float: left;
    
 width: 250px;
    
 height: 150px;
    
 padding: 0;
    
 border: 1px solid #efefef;
    
 margin: 0 30px 30px 0;
    
 background: #fff;
    
 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    
 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
     
 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
 
}

ul.box li:before,
ul.box li:after {
    
 content: '';
    
 z-index: -1;
    
 position: absolute;
    
 left: 10px;
    
 bottom: 10px;
    
 width: 70%;
    
 max-width: 300px;
     /* avoid rotation causing ugly appearance at large container widths */
 max-height: 100px;
    
 height: 55%;
    
 -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    
 -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    
 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    
 -webkit-transform: skew(-15deg) rotate(-6deg);
    
 -moz-transform: skew(-15deg) rotate(-6deg);
    
 -ms-transform: skew(-15deg) rotate(-6deg);
    
 -o-transform: skew(-15deg) rotate(-6deg);
    
 transform: skew(-15deg) rotate(-6deg);
 
}

ul.box li:after {
    
 left: auto;
    
 right: 10px;
    
 -webkit-transform: skew(15deg) rotate(6deg);
    
 -moz-transform: skew(15deg) rotate(6deg);
    
 -ms-transform: skew(15deg) rotate(6deg);
    
 -o-transform: skew(15deg) rotate(6deg);
    
 transform: skew(15deg) rotate(6deg);
 
}

3、CSS font属性缩写

p {
    
 font: italic small-caps bold 1.2em/1.0em Arial, Tahoma, Helvetica;

}

4、CSS3 圆点图案

body {
    
 background: radial-gradient(circle, white 10%, transparent 10%),
 radial-gradient(circle, white 10%, black 10%) 50px 50px;
    
 background-size: 100px 100px;

}

5、禁用移动Webkit的选择高亮

body {
    
 -webkit-touch-callout: none;
    
 -webkit-user-select: none;
    
 -khtml-user-select: none;
    
 -moz-user-select: none;
    
 -ms-user-select: none;
    
 user-select: none;

}

6、在可打印的网页中显示URLs

@media print {
 
 a:after {
     
 content: " [" attr(href) "] ";
 
 }
 
}

7、深灰色的圆形按钮

.graybtn {
    
 -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    
 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    
 box-shadow:inset 0px 1px 0px 0px #ffffff;
    
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
    
 background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );
    
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
    
 background-color:#ffffff;
    
 -moz-border-radius:6px;
    
 -webkit-border-radius:6px;
    
 border-radius:6px;
    
 border:1px solid #dcdcdc;
    
 display:inline-block;
    
 color:#777777;
    
 font-family:arial;
    
 font-size:15px;
    
 font-weight:bold;
    
 padding:6px 24px;
    
 text-decoration:none;
    
 text-shadow:1px 1px 0px #ffffff;

}

.graybtn:hover {
    
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );
    
 background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );
    
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');
    
 background-color:#d1d1d1;

}

.graybtn:active {
    
 position:relative;
    
 top:1px;

}

8、CSS悬浮提示文本

a {
     
 border-bottom:1px solid #bbb;
    
 color:#666;
    
 display:inline-block;
    
 position:relative;
    
 text-decoration:none;

}

a:hover,
a:focus {
    
 color:#36c;

}

a:active {
    
 top:1px;
 
}

/* Tooltip styling */
a[data-tooltip]:after {
    
 border-top: 8px solid #222;
    
 border-top: 8px solid hsla(0,0%,0%,.85);
    
 border-left: 8px solid transparent;
    
 border-right: 8px solid transparent;
    
 content: "";
    
 display: none;
    
 height: 0;
    
 width: 0;
    
 left: 25%;
    
 position: absolute;

}

a[data-tooltip]:before {
    
 background: #222;
    
 background: hsla(0,0%,0%,.85);
    
 color: #f6f6f6;
    
 content: attr(data-tooltip);
    
 display: none;
    
 font-family: sans-serif;
    
 font-size: 14px;
    
 height: 32px;
    
 left: 0;
    
 line-height: 32px;
    
 padding: 0 15px;
    
 position: absolute;
    
 text-shadow: 0 1px 1px hsla(0,0%,0%,1);
    
 white-space: nowrap;
    
 -webkit-border-radius: 5px;
    
 -moz-border-radius: 5px;
    
 -o-border-radius: 5px;
    
 border-radius: 5px;

}

a[data-tooltip]:hover:after {
    
 display: block;
    
 top: -9px;

}

a[data-tooltip]:hover:before {
    
 display: block;
    
 top: -41px;

}

a[data-tooltip]:active:after {
    
 top: -10px;

}

a[data-tooltip]:active:before {
    
 top: -42px;

}
    

相信很多自学的小伙伴都想学习web前端，可以关注小编后私信【学习】可以免费领取学习地址/案例教程/2018最新的一套学习教程，让学习有方向。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！