html - 使用 CSS 在可变大小的图像周围创建图像边框

Question

我想在图像周围放置一个边框 - 比如相框图像。是否有捷径可寻？即纯粹使用 CSS，理想情况下我想在边缘重新创建 45 度连接并尽可能逼真。这里的障碍是图像大小是可变的。

Answer 1

我找到了这个网页:http://cssdeck.com/labs/picture-frame-using-box-shadows

运行下面的代码片段，看看它是如何工作的。它是纯粹的 CSS，不涉及 HTML 和 JS。该效果是使用 box-shadow 属性实现的。当然，对于您的代码，您需要包含 HTML 并设置图像的大小(或将它们保持在百分比中 - 即 100%)，然后稍微调整代码。效果已创建并适用于不同大小的图像，您只需将插图颜色值更改为您喜欢的样式。

/* Pure CSS Picture Frame */

html {
	overflow: hidden;
	background-color: #653845;
	background-image: linear-gradient(45deg, hsla(0,0%,0%,.1) 50%, transparent 50%),
	                  linear-gradient(-45deg, hsla(0,0%,0%,.1) 50%, transparent 50%);
	background-size: .25em .25em;
	box-shadow: inset 0 0 500px hsla(0,0%,0%,.5);
	height: 100%;
	padding: 1px;
}

body {
	height: 300px;
	width: 400px;
	margin: -150px -200px;
	position: absolute;
	left: 50%;
	top: 50%;
	background: gray url(http://dribbble.com/system/users/13774/screenshots/423481/_111.jpg?1329144172);
	border: 1px solid;
	border-color: #bbb #999;
	box-shadow: 
		0 2px 5px hsla(0,0%,0%,.4),
	
		inset 0 1px 0 #ccc,	
		inset 1px 0 0 #aaa,
		inset 0 -1px 0 #ccc,
		inset -1px 0 0 #aaa,
			
		inset 0 2px 0 #c6c6c6,
		inset 2px 0 0 #a6a6a6,
		inset 0 -2px 0 #c6c6c6,
		inset -2px 0 0 #a6a6a6,
		
		inset 0 3px 0 #c0c0c0,
		inset 3px 0 0 #a0a0a0,
		inset 0 -3px 0 #c0c0c0,
		inset -3px 0 0 #a0a0a0,	
		
		inset 0 4px 0 #b9b9b9,
		inset 4px 0 0 #999,
		inset 0 -4px 0 #b9b9b9,
		inset -4px 0 0 #999,
		
		inset 0 5px 0 #b6b6b6,
		inset 5px 0 0 #969696,
		inset 0 -5px 0 #b6b6b6,
		inset -5px 0 0 #969696,
		
		inset 0 6px 0 #b0b0b0,
		inset 6px 0 0 #909090,
		inset 0 -6px 0 #b0b0b0,
		inset -6px 0 0 #909090,
		
		inset 0 7px 0 #a9a9a9,
		inset 7px 0 0 #898989,
		inset 0 -7px 0 #a9a9a9,
		inset -7px 0 0 #898989,
		
		inset 0 8px 0 #a6a6a6,
		inset 8px 0 0 #868686,
		inset 0 -8px 0 #a6a6a6,
		inset -8px 0 0 #868686,
		
		inset 0 9px 0 #a0a0a0,
		inset 9px 0 0 #808080,
		inset 0 -9px 0 #a0a0a0,
		inset -9px 0 0 #808080,
		
		inset 0 10px 0 #888,
		inset 10px 0 0 #666,
		inset 0 -10px 0 #888,
		inset -10px 0 0 #666,
		
		inset 0 0 10px 10px hsla(0,0%,0%,.5);
}

附言要进一步设计您的照片，您可以添加斜 Angular 效果。 Google(或您喜欢的任何搜索引擎)如果您自己不熟悉如何执行此操作，当我搜索“CSS image bevel”时，有很多资源可用，并且存在许多创建效果的方法。

希望这就是您要找的!享受吧!