CSS3：linear-gradient切角画册
更新时间：2020-01-21 13:37:54 来源： 阅读量：
【摘要】 前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。考必过为大家整理了CSS3：linear-gradient切角画册，想学习前端的小伙伴可以看过来！CSS3：linear-gradient切角画册的详细内容如下：
关于linear-gradient的语法就不多做介绍了网上到处都是，下面看个小例
我们先做一个渐变，使其让他旋转，
<div class="example"> </div>
.example{
height:150px;
width:500px;
margin: 100px auto;
background-color:#4299BC;
background:
-webkit-linear-gradient(45deg, #0E2D57 30px, #A7EAFB 30px),
-webkit-linear-gradient(135deg, #0E2D57 30px, #A7EAFB 30px),
-webkit-linear-gradient(225deg, #0E2D57 30px, #A7EAFB 30px),
-webkit-linear-gradient(315deg, #0E2D57 30px, #A7EAFB 30px);
background-position: bottom left, bottom right, top right, top left;
background-size: 55% 55%;
background-repeat: no-repeat;
}
如果把深色改为透明，那么我们想要的东西就出来了
查看效果
代码下
<div class="tucked-corners-top"> <div class="tucked-corners-bottom"><img src="······"></div> </div>
.tucked-corners-top {
position: relative;
width: 500px;
min-height: 200px;
margin: 100px auto;
padding: 20px;
background-color: #fff;
background:
-webkit-linear-gradient(45deg, transparent 10px, #fff 10px),
-webkit-linear-gradient(135deg, transparent 10px, #fff 10px),
-webkit-linear-gradient(225deg, transparent 10px, #fff 10px),
-webkit-linear-gradient(315deg, transparent 10px, #fff 10px);
background:
-moz-linear-gradient(45deg, transparent 10px, #fff 10px),
-moz-linear-gradient(135deg, transparent 10px, #fff 10px),
-moz-linear-gradient(225deg, transparent 10px, #fff 10px),
-moz-linear-gradient(315deg, transparent 10px, #fff 10px);
background:
-o-linear-gradient(45deg, transparent 10px, #fff 10px),
-o-linear-gradient(135deg, transparent 10px, #fff 10px),
-o-linear-gradient(225deg, transparent 10px, #fff 10px),
-o-linear-gradient(315deg, transparent 10px, #fff 10px);
background-position: bottom left, bottom right, top right, top left;
background-size: 55% 55%;
background-repeat: no-repeat;
-moz-box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5);
box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5);
}
[class*='tucked-corners-']::before,
[class*='tucked-corners-']::after {
content: '';
position: absolute;
height: 20px; width: 80px;
-webkit-box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5);
-moz-box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5);
box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5);
box-shadow: none\9; /* IE9 */
}
.tucked-corners-top::before,
.tucked-corners-top::after {
top: -10px;
}
.tucked-corners-bottom::before,
.tucked-corners-bottom::after {
bottom: -10px;
}
.tucked-corners-top::before,
.tucked-corners-bottom::before {
left: -42px;
}
.tucked-corners-top::after,
.tucked-corners-bottom::after {
right: -42px;
}
.tucked-corners-top::before {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.tucked-corners-top::after {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.tucked-corners-bottom::before {
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.tucked-corners-bottom::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
查看效果
ps：IE好像还没有完全支持，所以我就没有写IE兼容
以上就是CSS3：linear-gradient切角画册的详细内容，在学习前端的过程中大家要学会利用网络解决问题。只看理论是不能带来提到的，将学到的知识进行实践才能帮助我们熟悉代码的运用，特别是项目经验，可以为我们带来很大的提升哦！