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最新的一套學習教程，讓學習有方向。

閱讀更多 吐泡泡魚 的文章

關鍵字: 0verflow 鮮豔 WebKit