課程
/前端開發
/HTML/CSS
/十天精通CSS3
左邊黑色陰影的半圓怎么才能移動到右側,和另一個半圓合并成一個圓
2020-07-16
源自:十天精通CSS3 2-3
正在回答
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>boxshadow</title>
<style>
.a{
? ? width:500px;
? ? hidden:500px;
? ? display:flex;
}
.boxshadow-outset{
? ? width:50px;
? ? height:100px;
? ? box-shadow:-4px 4px 6px red inset;
? ? border-radius:50px 0 0 50px;
.boxshadow-inset{
? ? box-shadow:-4px -4px 6px blue inset;
? ? border-radius:0 50px 50px 0;
</style>
</head>
<body>
<div class="a">
?<div class="boxshadow-outset">
?</div>
?<div class="boxshadow-inset">
</div>
</body>
</html>
用一個大div包著兩個小div,再用大div使用“display:flex;”?可以讓div在一行排列,然后它自動就合并了
transform:translateX(75px);
舉報
本課程為CSS3入門教程,深刻詳解CSS3知識讓網頁穿上絢麗裝備
3 回答如何在一個圓里繞著轉
5 回答如何制作圓角按鈕
1 回答關于設置半圓的問題
3 回答css3代碼做左半圓,50px;0px;0px;50px;這樣為什么顯示不出來是左半圓呢?
4 回答怎樣把每個圓點都變成紅色呢
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2020-11-24
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>boxshadow</title>
<style>
.a{
? ? width:500px;
? ? hidden:500px;
? ? display:flex;
}
.boxshadow-outset{
? ? width:50px;
? ? height:100px;
? ? box-shadow:-4px 4px 6px red inset;
? ? border-radius:50px 0 0 50px;
}
.boxshadow-inset{
? ? width:50px;
? ? height:100px;
? ? box-shadow:-4px -4px 6px blue inset;
? ? border-radius:0 50px 50px 0;
}
</style>
</head>
<body>
<div class="a">
?<div class="boxshadow-outset">
?</div>
?<div class="boxshadow-inset">
?</div>
</div>
</body>
</html>
2020-07-16