边框半透明
给一个div设置半透明的边框
理想效果
body {
background: rgba(129, 21, 21, 0.5);
}
div {
border: 10px solid rgba(36, 201, 71, 0.5);
background: blue;
background-clip: padding-box;
max-width: 20em;
padding: 2em;
margin: 2em auto 0;
font: 100%/1.5 sans-serif;
}
默认情况下，背景颜色会延伸到边框所在区域的下层
这时需要border-clip属性来调整
border-box(默认)
padding-box（理想状态）给该div padding出border的区域，底下的背景色也不会铺进来
content-box 只给有内容的地方加背景色，其余的都不管
边框半透明 给一个div设置半透明的边框 理想效果 body { background: rgba(129...
《css-secrets》 半透明边框 关键字：半透明;边框;background-clip 需求描述 给一个容器...
第2章：背景与边框 1.半透明边框 背景知识：RGBA/HSLA颜色-给一个容器设置白色背景和一道半透明白色边框，...
一个难题假设想给一个容器设置一层白色背景和一道半透明边框，body的背景会从它的半透明边框透上来。最开始我们的尝试...
半透明颜色：rgba()、hsla() 代码： { border:10px dashed rgba(255,0,0...
半透明边框 半透明颜色的实现已经屡见不鲜，以往在css2，大家需要准备一张单像素的半透明图片，但是边框呢？所幸cs...
title: 背景与边框date: 2016-10-16tags: CSS Secrets 0x00 半透明边框 ...
第二章 背景与边框 半透明边框background-clip属性设置为padding-box可以使背景不侵入边框，...
1.半透明边框 问题: 如果我们要为一个容器设置红色背景和一道黑色半透明边框，我们可能会这样写: 但是效果却是这样...
背景和边框 (1).半透明边框: rgba hlsa H：Hue(色调)。0(或360)表示红色，120表示绿色，...
本文标题：边框半透明
本文链接：https://www.haomeiwen.com/subject/wjrbdctx.html
网友评论