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怎么实现论文页面的卷曲效果”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。