如何才能使书不卷角
用宽胶带把书角贴起来包书时加厚书角平实多加注意在书架上存放时要保持书本紧密直立
为您推荐：
其他类似问题
扫描下载二维码CSS3制作鼠标拖动展开卷角菜单特效
下载资源()次
阅读次数()次
发布时间：
用法简介：
CSS3制作鼠标拖动展开卷角菜单特效。文件引用：&style&type=&text/css&&
list-style-type:
padding:0;
height:200
background:#2f2f2f;
margin:30px&
background:-webkit-linear-gradient(45deg,&#2e2e2e&24%,&#5F5F5F&40%,#6f6f6f&43%,#5F5F5F&46%,#2F2F2F&50%,#fff&50%,#fff);
background:-moz-linear-gradient(45deg,&#2e2e2e&24%,&#5F5F5F&40%,#6f6f6f&43%,#5F5F5F&46%,#2F2F2F&50%,#fff&50%,#fff);height:90
background:-o-linear-gradient(45deg,&#2e2e2e&24%,&#5F5F5F&40%,#6f6f6f&43%,#5F5F5F&46%,#2F2F2F&50%,#fff&50%,#fff);height:90
background:-ms-linear-gradient(45deg,&#2e2e2e&24%,&#5F5F5F&40%,#6f6f6f&43%,#5F5F5F&46%,#2F2F2F&50%,#fff&50%,#fff);height:90
background:linear-gradient(45deg,&#2e2e2e&24%,&#5F5F5F&40%,#6f6f6f&43%,#5F5F5F&46%,#2F2F2F&50%,#fff&50%,#fff);height:90
border-radius:0&0&0px&90px&/&0&0&0&30
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
transform:rotate(-90deg);
box-shadow:5px&2px&8px&&
-webkit-transition:all&0.3s&linear&0s;
-moz-transition:all&0.3s&linear&0s;
-o-transition:all&0.3s&linear&0s;
-ms-transition:all&0.3s&linear&0s;
transition:all&0.3s&linear&0s;
.corner:after{
height:100%;
width:100%;
content:&&;
border-radius:90px&90px&0px&0&/&40px&40px&0&0;
z-index:1;
background:#2F2F2F;
-webkit-transform:rotate(77deg);
-moz-transform:rotate(77deg);
-o-transform:rotate(77deg);
-ms-transform:rotate(77deg);
transform:rotate(77deg);
box-shadow:0px&0px&8px&black&
margin:20px&20
border-radius:30
border:1px&solid𤿛
box-shadow:0px&2px&2px&rgba(0,0,0,0.6);
.button&li&{float:}
.button&li&a{
text-decoration:
padding:0&20
line-height:36
font-size:14
text-align:
border-right:1px&solid𤿛
box-shadow:-1px&0px&0px&rgba(255,255,255,0.1)&inset,inset&0px&-1px&1px&rgba(200,200,200,0.1),inset&0px&1px&2px&rgba(255,255,255,0.1);
text-shadow:0px&-1px&0px�
background:-webkit-linear-gradient(top,rgba(200,200,200,0.1)&0%,rgba(200,200,200,0.1)&50%,#222&50%,#222);
background:-moz-linear-gradient(top,rgba(200,200,200,0.1)&0%,rgba(200,200,200,0.1)&50%,#222&50%,#222);
background:-o-linear-gradient(top,rgba(200,200,200,0.1)&0%,rgba(200,200,200,0.1)&50%,#222&50%,#222);
background:-ms-linear-gradient(top,rgba(200,200,200,0.1)&0%,rgba(200,200,200,0.1)&50%,#222&50%,#222);
background:linear-gradient(top,rgba(200,200,200,0.1)&0%,rgba(200,200,200,0.1)&50%,#222&50%,#222);
.button&li:first-child&a{border-radius:30px&0&0&30}
.button&li:last-child&a{border-radius:0px&30px&30px&0;border-right:}
.button&li&a:hover{
background:-webkit-linear-gradient(top,rgba(50,50,50,0.4)&20%,rgba(100,100,100,0.3));
background:-moz-linear-gradient(top,rgba(50,50,50,0.4)&20%,rgba(100,100,100,0.3));
background:-o-linear-gradient(top,rgba(50,50,50,0.4)&20%,rgba(100,100,100,0.3));
background:-ms-linear-gradient(top,rgba(50,50,50,0.4)&20%,rgba(100,100,100,0.3));
background:linear-gradient(top,rgba(50,50,50,0.4)&20%,rgba(100,100,100,0.3));
box-shadow:0px&2px&4px&rgba(0,0,0,0.8)&
color:#b7def5;
text-shadow:0px&0px&8px&rgba(0,162,255,0.8);
padding:10px&0&0&25
margin:20px&
background:#FC9;
-webkit-animation:notices&linear&0.8s&infinite&;
-moz-animation:notices&linear&0.8s&infinite&;
-o-animation:notices&linear&0.8s&infinite&;
-ms-animation:notices&linear&0.8s&infinite&;
animation:notices&linear&0.8s&infinite&;
.arrow:after{
border-width:12
border-style:solid&dashed&dashed&
border-color:#FC9&transparent&transparent&
bottom:-22
content:&&;
@-webkit-keyframes&notices{
50%{top:10}
100%{top:0}
@-moz-keyframes&notices{
50%{top:10}
100%{top:0}
@-o-keyframes&notices{
50%{top:10}
100%{top:0}
@-ms-keyframes&notices{
50%{top:10}
100%{top:0}
@keyframes&notices{
50%{top:10}
100%{top:0}
相关标签：
网友评论：
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
什么是邮箱订阅？
邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式，用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮，当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。高达模型头上的角断掉了推荐用什么胶水或者办法修复比较好呢？ - 爱问知识人
(window.slotbydup=window.slotbydup || []).push({
id: '2491531',
container: s,
size: '150,90',
display: 'inlay-fix'
模型头上的角断掉了推荐用什么胶水或者办法修复比较好呢？
田宫的 就是日本那个 标志是两个星 但背景一红一篮的！这些适合用于模型的（如果对你有帮助，请点击＂好评＂，谢谢！）
模型头上的角断掉了，推荐用502胶水或者是强力胶修复比较好。如果您觉得正确或者采纳的话，麻烦给我好评哦，谢谢。
您的举报已经提交成功，我们将尽快处理，谢谢！
百度贴吧里有一个不错，介绍模型以及拼装技术网址，里面有各种内容分类的链接地址点击就成了，分类据自身情况选择挺不错的。：
大家还关注用css3制作纸张效果(外翻卷角)
用css3制作纸张效果
一、中规中矩的效果
所谓&中规中矩的效果&就是加个投影，贴个胶带什么的。效果如下：
这里纸张本身的效果没有什么说头的，就是个CSS3的box-shadow投影效果而已，相关代码如下：-moz-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); 反而是上面的胶带纸效果有点说头，这些微微倾斜的胶带是CSS写出来的，大部分效果源自CSS3，主要有RGBA显示半透明背景色，box-shadow显示淡淡的投影，transform做旋转效果；元素使用after伪类生成，完整代码如下：.page:after { width: 180 height: 30 content: " "; margin-left: -90 border: 1px solid rgba(200, 200, 200, .8); background: rgba(254, 254, 254, .6); -moz-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1); box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1); -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); position: left: 50%; top: -15 } 老外似乎很喜欢使用before和after伪类，国外最近的些教程，技术点等经常见到此玩意。我个人感觉有跟风之嫌，就像是狂热的经济泡沫，不需 要太久，大家会冷静下来重新审视这些曾经上手简单，自我感觉不错的方法。由于目前IE6/7不支持before/after类，所以，某种意义上来说，伪 类的使用少了些兼顾IE下显示的烦恼。
二、外翻卷角纸张效果
纸张一般都是有卷角的，所以，我们可以更近一步，模拟卷角效果来使得纸张的感觉更逼真，这里就要借助于投影了，且是曲线投影。
我们还可以给纸张增加渐变(gradient)效果，以模拟纸张的曲度。同时，可以给文字增加投影，可以让文字有书写的凹陷感，可以进一步让纸张效果更逼真。
于是，在&中规中矩&纸张基础上，我们做点小手术，结果得到下面的效果：
您可以狠狠地点击这里：渐变卷边纸张效果demo
目前貌似opera浏览器还不支持CSS3渐变，同时webkit核心下浏览器下的gradient渐变的写法已经开始向FireFox浏览器靠拢了。确实，都是CSS3，有必要搞得五花八门吗？
相关渐变CSS代码如下：background:-moz-linear-gradient(top, #f4f39e, #f5da41 60%, #fe6); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f4f39e), to(#fe6), color-stop(.6, #f5da41)); 在60%的位置有个颜色拐点。
关于弧形的投影，也是使用:before/:after伪类实现的，相关代码如下：.page:before { -webkit-transform: skew(-15deg) rotate(-5deg); -moz-transform: skew(-15deg) rotate(-5deg); -o-transform: skew(-15deg) rotate(-5deg); transform: skew(-15deg) rotate(-5deg); left: 15 } .page:after { -webkit-transform: skew(15deg) rotate(5deg); -moz-transform: skew(15deg) rotate(5deg); -o-transform: skew(15deg) rotate(5deg); transform: skew(15deg) rotate(5deg); right: 15 } .page:before, .page:after { width: 90%; height: 20%; content: ' '; -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); position: bottom: 22 z-index: -1; } 要想查看效果的完整代码，demo页面查看源文件即可，脱光光，一览无遗。
这里的曲线投影卷角效果支持Opera浏览器，如下截图：
三、带分隔线的卷纸纸张效果
上面的纸张卷角效果是通过曲线投影效果来模拟的，而这里，纸张的卷边效果是纸张真的&曲线化&了，而且，还是带隔线的纸张效果哦，您可以参见下面的效果截图(Chrome 9)：
这里，Firefox浏览器下的纸张隔线使用的是重复渐变(Repeating Gradients)实现的，对于webkit浏览器，使用的是background-size实现的。实际上，Firefox3.6+已经支持background-size属性了(-moz-background-size)， 所以，对于Firefox浏览器，这里使用重复渐变与渐变+background-size是等效的。在FireFox4以及IE9浏览器中 background-size属性已经没有私有属性了，Opera浏览器在9.5版本时候就已经支持background-size属性了，但是存在一 些bug。
这里分隔线实现的相关CSS如下：background: -moz-repeating-linear-gradient( top, #fcf59b, #fcf59b 29px, #81cbbc 30px ); background: -webkit-gradient( linear, left top, left bottom, from(#81cbbc), color-stop(2%, #fcf59b) ); background: repeating-linear-gradient( top, #fcf59b, #fcf59b 29px, #81cbbc 30px ); -webkit-background-size: 100% 30而对于曲边的实现，使用的是border-radius圆角，这里展示下示意的代码：border-bottom-left-radius: 20px 500 border-bottom-right-radius: 500px 30 border-top-right-radius: 5px 100当然，FireFox浏览器下的写法不是如此，其bottom, left是连起来的，而不是&-&分隔，这里仅仅是示意，这里的微曲线是如何实现的。相信看到上面的代码就知道意思了，这里就不铝恕
还有其他些细节，如如何控制行高让文字与隔线一一对应，这些您要是有兴趣可以去demo页面，通过查看元素等方法一看究竟。
四、最后点老生常谈
难免的，本文的重点在于CSS3，所以就本文而言，IE6/IE7/IE8浏览器就是过来打酱油的，且三个纸张效果从一而终，都是下面这副模样：
虽然没有透明胶效果，没有投影，没有卷边，更没有分隔线，但是，就功能上来讲，一点都不影响使用。所以，无论你是渐进增强还是退求其次，纸张投影效果在实际项目中的应该也不是不可以的，这就要看个人和团队的抉择了。
其实对于IE浏览器，我们可以借助于javascript，添加部分效果，例如透明胶带的创建，曲线投影效果等。原理如 下：:before/:after伪类创建的元素在IE下使用javascript创建，旋转投影等都可以借助IE的滤镜实现。但是，还是要看个人和团 队，愿不愿意花这个成本了。
就这些，感谢阅读。文中要是要表述不准确的地方，欢迎指正，不甚感谢。
顶一下(0) 踩一下(0)
热门标签：笔记本电脑拐角被摔坏了用什么胶水粘比较好_百度知道