CSS 边框向内弯曲 [英] CSS borders bend inside
本文介绍了CSS 边框向内弯曲的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在元素内部构建带有弯曲边框的容器.是否可以仅使用 css?如果是容器应该有 auto
高度
解决方案
你可以试试这个方法——在你的div前后画一个带圆角边框的div
CSS:
#bend-inside{宽度:500px;溢出:隐藏;}#box-before{背景颜色:白色;边框半径:600px;高度:600px;宽度:600px;显示:内联块;位置:绝对;z-索引:2;右:550px;顶部:-200px;溢出:隐藏;}#盒子{背景颜色:#e5e5e5;宽度:400px;高度:200px;边距:0 自动;显示:内联块;溢出:隐藏;位置:绝对;z-索引:1;右:200px;}#box-after{背景颜色:白色;边框半径:600px;高度:600px;宽度:600px;显示:内联块;位置:绝对;z-索引:2;右:-350px;顶部:-200px;溢出:隐藏;}
HTML:
<div id="box-before"></div><div id="box"></div><div id="box-after"></div>
I want to build the container with bended borders inside the element. Is it possible to do using only css? If it is container can should have auto
height
解决方案
You can try this method - draw a div with rounded borders before and after your div
CSS:
#bend-inside{
width: 500px;
overflow: hidden;
}
#box-before{
background-color: white;
border-radius: 600px;
height: 600px;
width: 600px;
display: inline-block;
position: absolute;
z-index: 2;
right: 550px;
top: -200px;
overflow: hidden;
}
#box{
background-color: #e5e5e5;
width: 400px;
height: 200px;
margin: 0 auto;
display: inline-block;
overflow: hidden;
position: absolute;
z-index: 1;
right: 200px;
}
#box-after{
background-color: white;
border-radius: 600px;
height: 600px;
width: 600px;
display: inline-block;
position: absolute;
z-index: 2;
right: -350px;
top: -200px;
overflow: hidden;
}
HTML:
<div id="bend-inside">
<div id="box-before"></div>
<div id="box"></div>
<div id="box-after"></div>
</div>
这篇关于CSS 边框向内弯曲的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文