我需要給我的組件應用一個內邊界半徑，而不是一個外半徑。我有一個普通的DIV，并給它應用了一些樣式：
.border {
width: 350px;
height: 200px;
border: 50px solid gray;
border-radius: 8px;
background-color: #f3f3f3;
}
在這里，border-radius屬性沒有做我期望的事情，因為它是將樣式應用于邊界的外部而不是內部。有什么方法可以純粹使用 css 而不添加任何 html 元素來做到這一點嗎？
這里有一個代碼本。Codepen
uj5u.com熱心網友回復：
那這個呢？
你可以使用偽元素::after（或::before），并按照你想要的方式來設計它。
然后用absolute把它放在.border div的上面，
我給了它你想要的圓形邊框，然后把它放在中間，在你的.boder div的頂部，現在它看起來像.border的內角是圓的
span class="hljs-selector-class">.border {
width: 350px;
height: 200px;
border: 50px solid gray;
background-color: white;
position: relative;
}
.border: :after {
content: "";
position: absolute;
top: -20px;
left: -20px;
background-color: #f3f3f3;
border-radius: 50px;
height: 240px;
width: 390px;
}< div class="border"></div> uj5u.com熱心網友回復：
這個怎么樣？你可以享受這個代碼。
>。.outer_box {
display: flex;
width: 350px;
height: 200px;
border: 50px solid gray;
border-radius: 8px;
background-color: 灰色。
}
.inner_box {
width: 330px;
height: 180px;
margin: auto auto;
border: 8px solid white;
border-radius: 10px;
background-color: white;
}<div class="outer_box"> /span>
<div class="inner_box"/span>> </div>>
</div>/span>uj5u.com熱心網友回復：
。span class="hljs-selector-class">.border {
width: 350px;
height: 200px;
border: 50px solid gray;
background-color: #f3f3f3;
}
.outer {
border-radius: 100px;
}
.inner {
position: relative;
top: -50px;
left: -50px;
z-index: -1;
}<div class="border outer"/span>>
<div class="border inner"/span>> </div>>
</div>/span>uj5u.com熱心網友回復：
使用oultine屬性作為邊框，使用::after可以給.border類一個帶有border-radius的背景，可以定位在重疊的.border上，給出一個內邊界-半徑的外觀。
使用了z-index屬性-1，這樣.border的內容就不會隱藏在背景后面。
span class="hljs-selector-class">.border {
width: 350px;
height: 200px;
outline: 40px solid gray;
margin: 40px;
background-color: 灰色。
position: relative;
padding: 10px;
z-index: 1;
}
.border::after {
content: "";
position: absolute;
background-color: 紅色。
border-radius: 18px;
width: 350px;
height: 200px;
left: 0px;
top: 0px;
z-index: -1;
}< div class="border"> ddsdggw
</div>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/321894.html
標籤：