CSS3：linear-gradient切角画册

来源：互联网发布：加工中心手动编程程序编辑：程序博客网时间：2024/04/28 22:06
<!DOCTYPE HTML><html><head><meta charset="UTF-8" /><title></title><link rel='stylesheet' href='http://www.daqianduan.com/static/css/example.css' type='text/css' media='all' /></head><body><div class="ads-example ads-example-01">    <script type="text/javascript">var cpro_id="u2273667";(window["cproStyleApi"] = window["cproStyleApi"] || {})[cpro_id]={at:"3",rsi0:"778",rsi1:"125",pat:"6",tn:"baiduCustNativeAD",rss1:"#FFFFFF",conBW:"0",adp:"1",ptt:"0",titFF:"%E5%BE%AE%E8%BD%AF%E9%9B%85%E9%BB%91",titFS:"14",rss2:"#555555",titSU:"0",ptbg:"90",piw:"0",pih:"0",ptp:"0"}</script><script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script></div><div class="demo-container demo"><style>.tucked-corners-top *{    padding:0;    margin:0;    font-family:"Microsoft YaHei";    box-sizing: border-box;    -webkit-box-sizing: border-box;}.tucked-corners-top img{max-width:100%;}.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; /* Do not show on IE9 #needed */            }.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);}</style><div class="tucked-corners-top">    <div class="tucked-corners-bottom"><img src="http://img.my.csdn.net/uploads/201711/17/1510909902_4357.jpg" alt=""></div></div></div><div style="display:none"><div style="display:none"><script src="http://v1.cnzz.com/stat.php?id=5899338&web_id=5899338" language="JavaScript"></script></div></div></body></html>
阅读全文
0 0