本文小編為大家詳細(xì)介紹“css怎么實(shí)現(xiàn)論文頁(yè)面的卷曲效果”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“css怎么實(shí)現(xiàn)論文頁(yè)面的卷曲效果”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括綠春網(wǎng)站建設(shè)、綠春網(wǎng)站制作、綠春網(wǎng)頁(yè)制作以及綠春網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，綠春網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到綠春省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

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、論文頁(yè)面的卷曲效果

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屬性縮寫(xiě)

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

4、CSS3 圓點(diǎn)圖案

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

5、禁用移動(dòng)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、在可打印的網(wǎng)頁(yè)中顯示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怎么實(shí)現(xiàn)論文頁(yè)面的卷曲效果”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。