Q
半徑在裏面的背景
2
A
回答
2
div {
background:lightgreen;
width:100%;
height:200px;
position:relative;
text-align:center;
padding:100px 0 0 0;
box-sizing:border-box;
}
div:before {
content:'';
position:absolute;
background:white;
width:100%;
height:100px;
top:0;
left:0;
border-radius:40%;
transform:translatey(-50%);
}
<div>div</div>
1
像這樣的事情?
#wrapper {
position: relative; /* position:absolute needs a relative parent */
}
#main {
width: 100px;
height: 50px;
background-color: green;
text-align: center;
}
#cutout {
width: 100px;
height: 50px;
border-radius: 50px/25px; /* half of width/half of height
http://css-tricks.com/the-shapes-of-css/
remember to add vendor prefixes if necessary */
background-color: white;
position: absolute;
top: -30px; /* should be -25px, but a little padding looks nicer */
}
<div id='wrapper'>
<div id='cutout'></div>
<div id='main'><br>div</div>
</div>
0
檢查DEMO
<div id="wrapper">
<div id="inner"></div>
</div>
#wrapper {
width: 600px;
height: 300px;
margin: auto;
margin-top: 50px;
background-color: green;
overflow: hidden;
}
#inner {
width: 1200px;
height: 1200px;
border-radius: 600px;
background-color: #fff;
position: relative;
top: -1100px;
left: -300px;
}
相關問題
- 1. 半透明面板背景
- 2. 問背景邊界半徑的CSS
- 3. IE9中半徑爲Div的背景
- 4. 帶邊框半徑的透明背景
- 5. 半頁背景/列背景
- 6. CSS3邊框半徑背景重疊
- 7. 邊框半徑,背景圖像,背景漸變和IE8,IE10
- 8. CSS背景一半?
- 9. CSS背景一半
- 10. CardView在CardView的設置背景上保留角點半徑
- 11. 邊界半徑和背景在Firefox不連結只
- 12. 在android中的半透明webview背景
- 13. 盒對邊界半徑,但封閉的背景顏色去外面這
- 14. 半透明傾斜背景
- 15. Qt css背景半透明
- 16. 如何讓半徑邊界父div中的背景圖像
- 17. 如何爲NSAttributedString的背景設置角半徑?
- 18. 歌劇邊界半徑不隱藏背景的角落
- 19. 邊界半徑+的背景色==裁剪邊界
- 20. 使用邊界半徑時可見的背景圖像部分
- 21. thead和tfoot中的邊框半徑與背景圖片
- 22. CSS圓角半徑和背景填充的問題
- 23. 查找可繪製的背景圓半徑
- 24. UITableViewRowAction帶拐角半徑變化的單元背景顏色
- 25. 邊框半徑和背景顏色的IE CSS樣式
- 26. a:懸停背景與img裏面
- 27. 一半的頁面上的背景圖像 - 另一半的文本
- 28. 背景在ipad切成兩半
- 29. 半獨特的網站背景概念。視頻作爲背景
- 30. IE:邊框半徑與背景不平滑