CSS - 背景顏色的邊框半徑，線性漸變 50% 寬度
[英]CSS - Border Radius on Background Color with linear gradient 50% width
問題描述
我有一個寬度為 50% 的背景
background: linear-gradient(to right, #0009 50%, transparent 0);
我希望它有一個border-radius ，但唯一的問題是邊框半徑對 100% 寬度的影響，而不是 50%
這是當前的 output 如果我添加border-radius: 0px 120px 120px 0px
HTML 代碼：
<div style="background: linear-gradient(to right, #0009 52%, transparent 0); border-radius: 0px 120px 120px 0px; border: 1px solid;"> <div class="container"> <div class="row"> <div class="col-6" style="color: #fff; padding: 30px 30px 30px 0px;"> <div style="font-size: 32px;">HELLO WORLD</div> </div> </div> </div> </div>
3 個解決方案
解決方案1
0 2020-08-12 16:31:50
我認為你需要這個：
<!DOCTYPE html>
<html>
<head>
<title>Anything You Like</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#container{
border: 1px solid black;
border-radius: 0px 120px 120px 0px;
}
#D01{
font-size: 32px;
background: linear-gradient(to right, #0009 100%, transparent 0);
border-radius: 0px 120px 120px 0px;
width:50%;
}
</style>
</head>
<body>
<div id="container">
<div id="D01">HELLO WORLD</div>
</div>
</body>
</html>
解決方案2
0 2020-08-12 16:43:50
你需要這樣的東西嗎？
<div style="background-color: white; border: 1px solid; height: 50px;"> <div style="background-color: #0009; position: absoloute; top: 0; left: 0; width: 50%; height: 100%; border-radius: 0px 120px 120px 0px;"> <span style="height: 100%; width: 100%; display: flex; align-items: center; justify-content: center">Hello world</span> </div> </div>
解決方案3
0 2020-08-12 17:50:42
很難理解你想要什么，但現在我明白了。 你需要創建另一個elemento，border-radius 改變div，而不是背景
<div style=""> <div style="background: red; width: 52%; background: #0009 52%; border-radius: 0px 120px 120px 0px; border: 1px solid;"> <div class="container"> <div class="row"> <div class="col-6" style="color: #fff; padding: 30px 30px 30px 0px;"> <div style="font-size: 32px;">HELLO WORLD</div> </div> </div> </div> </div> </div>
如何避免 CSS inheritance 保持線性漸變背景顏色不變？
[英]How to avoid CSS inheritance to keep linear gradient background color intact?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.