css 半透明的边框

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 半透明的边框相关的知识,希望对你有一定的参考价值。

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
// alert('Hello world!');
<div>
Can I haz semi-transparent borders?
Pretty please?
</div>
/**
 * Translucent borders
 */

body {
	background: url('http://csssecrets.io/images/stone-art.jpg');
}

div {
	border: 10px solid hsla(0,0%,100%,.5);
	background: white;
	background-clip: padding-box;
	
	/* styling */
	max-width: 20em;
	padding: 2em;
	margin: 2em auto 0;
	font: 100%/1.5 sans-serif;
}

以上是关于css 半透明的边框的主要内容,如果未能解决你的问题,请参考以下文章

半透明边框与background-clip

如何使用 CSS 制作透明边框?

UIButton 半透明边框

c# winform 如何实现窗体边框半透明

android shape的使用详解以及常用效果(渐变色分割线边框半透明阴影效果等)

ps怎么做中间透明的边框