zoukankan      html  css  js  c++  java
  • CSS3:linear-gradient切角画册

    关于linear-gradient的语法就不多做介绍了网上到处都是,下面看个小例

    我们先做一个渐变,使其让他旋转,

    dome1

    <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;
    }

    如果把深色改为透明,那么我们想要的东西就出来了

    demo

    查看效果

    代码下

    <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;  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: none9; /* 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兼容

  • 相关阅读:
    拥抱webpack4,有效缩减构建时间57%+
    可能是最详细的UMD模块入门指南
    Chrome远程调试手机端UC浏览器
    sea.js的同步魔法
    在Linux和Windows系统中输出目录结构
    从部署上做到前后端分离
    一种在地图中处理曲线的通用方法
    vue项目中引入iconfont
    前端路上的自我怀疑----------自我突破
    表格布局----基于bootstrap样式 布局
  • 原文地址:https://www.cnblogs.com/zhaoleilei/p/4977589.html
Copyright © 2011-2022 走看看