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