css - 这个卷角的效果怎么做？-Soal Jawab Rangkaian PHP Cina

Artikel Topik pembelajaran Muat turun Soal Jawab Kamus Pengaturcaraan Permainan kemas kini terkini

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

css - 这个卷角的效果怎么做？

伊谢尔伦 2017-04-17 14:30:45

444

第一个是原图，第二个是做到一半的图，border中怎么加渐变的效果呢，还有阴影的效果，怎么才可以和原图一样呢？三角的阴影我加的是drop-shadow，可是上面也会有白色的阴影，还有我下面这个椭圆的伪元素怎样才能做出如图的阴影呢？
谢谢

伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

membalas semua (1)

刘奇2017-04-17 14:32:45 Tingkat 1

//html  
 
 //css .form{ width:408px; height:200px; background:#2f2f2f; position:relative; overflow:hidden; margin:30px auto; } .corner{ 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:90px; background:-o-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height:90px; background:-ms-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height:90px; background:linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height:90px; width:90px; height:90px; border-radius:0 0 0px 90px / 0 0 0 30px; -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); -ms-transform:rotate(-90deg); transform:rotate(-90deg); position:absolute; left:-4px; top:-4px; box-shadow:5px 2px 8px black; overflow:hidden; } .corner:after{ height:100%; width:100%; position:absolute; content:""; top:-15px; left:-82px; 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 inset; }