css怎么實現論文頁面的卷曲效果

本文小編為大家詳細介紹“css怎么實現論文頁面的卷曲效果”，內容詳細，步驟清晰，細節處理妥當，希望這篇“css怎么實現論文頁面的卷曲效果”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

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;
}

讀到這里，這篇“css怎么實現論文頁面的卷曲效果”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。