关注前端开发
关注用户体验

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; 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兼容

赞(7)
未经允许不得转载:大前端 » CSS3:linear-gradient切角画册
分享到: 更多 (0)

评论 21

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #21

    You are my inspiration , I possess few web logs and infrequently run out from to brand.

  2. #20

    How to transfer firefox bookmarks from one laptop to another laptop?

  3. #19

    How do I start a blog under a pen-name and maintain my anonymity. How do you then get regular readers?

  4. #18

    no matter we can search out more and ideally we cant get better than this no doubt

    solarmovies free2周前 (06-07)回复
  5. #17

    Your ability to write about this kind of info is just the thing we all desire. Simply by discussing your knowledge you support people thru discussing your own personal observations. And I’ll let you know right now your writing served me personally.

    free gift card1个月前 (05-16)回复
  6. #16

    Hmm it looks like your website ate my first comment (it was super long) so I guess I’ll just sum it up what I had written and say, I’m thoroughly enjoying your blog. I as well am an aspiring blog writer but I’m still new to everything. Do you have any recommendations for novice blog writers? I’d really appreciate it.

    Rory Canizares1个月前 (05-15)回复
  7. #15

    Will you mind basically if I cite a pair of your blogposts given that I give you acknowledgement combined with sources back to your web page? My web page is within the comparable area of interest as your own and my web site visitors will gain from many of the material you present on this site. Please be sure to inform me if it is okay with you. Kind regards!

    Chere Burkert1个月前 (05-13)回复
  8. #14

    material, as a result of it might ceaselessly be pleasing to decide a warm and pleasant face or maybe hear a voice when initial landing.

    Nonton Anime1个月前 (05-10)回复
  9. #13

    Excellent post however , I was wanting to know if you could write a litte more on this subject? I’d be very thankful if you could elaborate a little bit more. Bless you!

    cat blog1个月前 (05-08)回复
  10. #12

    Exactly where might I get a hold of this page layout?

    rajapoker2个月前 (05-03)回复
  11. #11

    I’m amazed, I have to admit. Rarely do I encounter a blog that’s equally educative and engaging, and let me tell you, you’ve hit the nail on the head. The issue is something not enough folks are speaking intelligently about. Now i’m very happy that I came across this in my hunt for something regarding this.

    Apex Legends Season 12个月前 (04-20)回复
  12. #10

    Good post! We will be linking to this great content on our site. Keep up the great writing.

    DMC52个月前 (04-17)回复
  13. #9

    Enjoyed the post.

    boekhouder zzp2个月前 (04-11)回复
  14. #8

    Hi, I do think this is an excellent website. I stumbledupon it 😉 I am going to return once again since i have bookmarked it. Money and freedom is the greatest way to change, may you be rich and continue to help other people.

    Apex Legends Tiers3个月前 (04-02)回复
  15. #7

    I quite like reading an article that will make people think. Also, many thanks for allowing me to comment!

    Apex Legends3个月前 (03-31)回复
  16. #6

    eye glasses are not only stylish but they can also protect your eyes from contaminants.,

    my singing monsters3个月前 (03-28)回复
  17. #5

    I discovered your blog post web site on the internet and appearance some of your early posts. Always maintain within the good operate. I just extra the Feed to my MSN News Reader. Looking for toward reading much more on your part down the line!…

    Francina Mcgoey3个月前 (03-11)回复
  18. #4

    多谢站长分享!

    影音4年前 (2015-10-09)回复
  19. #3

    学习了。。。。

    QQ申诉博客4年前 (2015-10-05)回复
  20. #2

    涨姿势了!

    明天更好4年前 (2015-09-28)回复
  21. #1

    不错,不错,多谢站长分享!

    星族VIP论坛4年前 (2015-09-22)回复

themebetter 国内更好的WordPress主题服务商

立即前往