css半透明边框

最新推荐文章于 2024-05-12 14:29:20 发布

weixin_34004750

最新推荐文章于 2024-05-12 14:29:20 发布

阅读量241

点赞数

原文链接：https://juejin.im/post/5cd3984be51d453acd5050d2

版权

核心：背景色会默认延伸到border下层。这里主要使用到background-clip属性，属性值包括border-box（背景延伸至边框外沿，但是在边框下层），padding-box（背景延伸至内边距外沿。不会绘制到边框处），content-box（背景被裁剪至内容区外沿）、text （背景被裁剪成文字的前景色,这是个实验性API，生产还不能用）

<head>
	<title>半透明边框</title>
	<meta charset="utf-8">
	<style type="text/css">
		html,body{
			padding: 0;
			margin:0;
			height: 100%;
			background: #000;
		}
		.box{
			width: 20rem;
			height: 8rem;
			margin:20% auto;
			background: #dfdfdf;
			border:2rem solid hsla(0,0%,100%,0.4);
			background-clip: padding-box;
		}
	</style>
</head>
<body>
	<div class='box'></div>
</body>
复制代码

转载于:https://juejin.im/post/5cd3984be51d453acd5050d2

weixin_34004750

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css半透明边框

核心：背景色会默认延伸到border下层。这里主要使用到background-clip属性，属性值包括border-box（背景延伸至边框外沿，但是在边框下层），padding-box（背景延伸至内边距外沿。不会绘制到边框处），content-box（背景被裁剪至内容区外沿）、text （背景被裁剪成文字的前景色,这是个实验性API，生产还不能用）<head> <title&...
复制链接

扫一扫