起初我只想說聲抱歉，因為我還沒有在網上看到我的問題的任何答案，但可能它在某個地方。基本上我想要另一個 div 但不知道這樣做所需的語法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Target #4 Ups n Downs</title>
</head>
<style>
body {
background: #62306d;
display: flex;
justify-content: center;
align-items: center;
/* min-height: 100vh; */
}
div {
width: 100px;
height: 100px;
background: #f7ec7d;
}
div:nth-of-type(2n 1) {
border-radius: 0% 0% 50% 50%;
transform: translateY(50px);
}
div:nth-of-type(2n) {
border-radius: 50% 50% 0% 0%;
transform: translateY(-50px);
}
</style>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
2 這是我的代碼，我試圖實作的影像是第一個將顯示的，但我不知道如何命名或使其作業。我想制作另一個 div 以便我可以制作：border-radius: 50% 50% 0 0 ; 取而代之的是：border-radius: 0 0 50% 50% ;
<style>
body {
background: #62306D;
margin: 0;
}
div {
width:100;
height:100;
background: #F7EC7D;
margin: 50 100 0 150;
border-radius: 0 0 50% 50%;
box-shadow: 100px 100px 0 0 #F7EC7D, -100px 100px 0 #F7EC7D; border-radius: 0 0 50% 50%;
{
???{
width:100;
height:100;
background: #F7EC7D;
margin: 50 100 0 150;
border-radius: 50% 50% 0 0 ;
}
</style>
<body>
<div></div>
</body>
3
<html lang="en">
<head>
<meta charset="UTF-8"
<meta name="viewport" content="width=device-width", initial-scale=1.0">
<title>Document</title>
<style>
body {
background: #62306D;
margin: 0;
}
#firstdiv {
width:100;
height:100;
background: #F7EC7D;
margin: 150 0 0 50;
border-radius: 0 0 50% 50%;
box-shadow: 200px 0px 0 0 #F7EC7D;
}
#seconddiv{
width:100;
height:100;
background: #F7EC7D;
margin: -200 100 0 150;
border-radius: 50% 50% 0 0;
}
</style>
</head>
<body>
<div id ="firstdiv"></div>
<div id ="seconddiv"></div>
</body>
</html>
感謝 Jawwad Haider 給了我#firstdiv{} #seconddiv{} 和 id 的想法。
uj5u.com熱心網友回復：
我可以從您的問題中提取的是，您想將兩種不同的 CSS 樣式添加到不同的 div，如果我假設是正確的，那么您可以使用為 div 提供 id 來區分它們，然后分別定義樣式，如下圖所示：
看圖片
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/403298.html
標籤：
上一篇：在洗掉“必需”標簽時無法正常作業
下一篇：如何在文本之外應用背景