让图片脱颖而出的边框效果？

我正在寻找一个特殊的CSS（3？）边框效果：应用时，它看起来像对象的角落突出了更多，然后在中间的两侧。这产生了一个很好的效果，就好像一张纸将会躺在网站上一样。让图片脱颖而出的边框效果？

你怎么称呼这个效果？

来源

2013-05-06 membersound

你能向我们展示任何图像或其他任何图像的效果吗？ – Sachin 2013-05-06 09:46:56

如果我知道关键字找到图片，我也会找到css源代码。我只是忘了名字... – membersound 2013-05-06 09:48:56

此页面包含一个好看的 “弯曲纸” 阴影效果，纯CSS：从源<li>元素的阴影效果

http://matthamm.com/box-shadow-curl.html

示例代码以上：

HTML：

<ul class="box"> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul>

CSS：

ul.box { 
position: relative; 
z-index: 1; /* prevent shadows falling behind containers with backgrounds */ 
overflow: hidden; 
list-style: none; 
margin: 0; 
padding: 0; } 


ul.box li { 
position: relative; 
float: left; 
width: 250px; 
height: 150px; 
padding: 0; 
border: 1px solid #efefef; 
margin: 0 30px 30px 0; 
background: #fff; 
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; } 


ul.box li:before, 
ul.box li:after { 
content: ''; 
z-index: -1; 
position: absolute; 
left: 10px; 
bottom: 10px; 
width: 70%; 
max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */ 
max-height: 100px; 
height: 55%; 
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
-webkit-transform: skew(-15deg) rotate(-6deg); 
-moz-transform: skew(-15deg) rotate(-6deg); 
-ms-transform: skew(-15deg) rotate(-6deg); 
-o-transform: skew(-15deg) rotate(-6deg); 
transform: skew(-15deg) rotate(-6deg); } 


ul.box li:after { 
left: auto; 
right: 10px; 
-webkit-transform: skew(15deg) rotate(6deg); 
-moz-transform: skew(15deg) rotate(6deg); 
-ms-transform: skew(15deg) rotate(6deg); 
-o-transform: skew(15deg) rotate(6deg); 
transform: skew(15deg) rotate(6deg); }

注：如果您使用的是父元素。确保父div具有position：relative; z-index：99;或者那些阴影不会出现。

来源

2013-05-06 09:55:48 Arbel

请在这里发布相关代码，将来可能无法使用外部链接，这会使您的答案失效。 – Uooo 2013-05-06 10:12:18

@ w4rumy，当然，完成。 – Arbel 2013-05-06 16:07:51

-1

你可以用一个将边框宽度设置为不同大小的小技巧来做到这一点。例如：

div{ 
    border-top: 1px solid black; 
    border-left: 1px solid black; 
    border-bottom: 2px solid black; 
    border-right: 2px solid black; 
    width: 200px; 
    height: 400px; 
}

Example

不知道这是怎么叫，虽然。

来源

2013-05-06 09:52:29 Uooo

这不是TS的意思，我很害怕。 – 2013-05-06 16:10:44

你可以用CSS3 box-shadow和变换来做到这一点。例如。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 
div { 
    width: 215px; 
    height: 80px; 
    border: 1px solid #ccc; 
    position: relative; 
    background: white; 
} 

div::before, div::after { 
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.2); 
    -webkit-transform: rotate(-8deg); 
    transform: rotate(-8deg); 
    position: absolute; 
    left: 10px; 
    bottom: 12px; 
    z-index: -1; 
    width: 50%; 
    max-width: 100px; 
    height: 20px; 
    content: ""; 
} 

div::after { 
    -webkit-transform: rotate(8deg); 
    transform: rotate(8deg); 
    right: 10px; 
    left: auto; 
} 
</style> 

</head> 
<body> 

<div></div> 

</body> 
</html>

http://codepen.io/anon/pen/JuwLd

来源

2013-05-06 09:55:07

让图片脱颖而出的边框效果？

回答

相关问题