html边框向内圆⾓,css效果之边框内圆⾓
本⽂主要介绍了css效果之边框内圆⾓，分享给⼤家，也给⾃⼰留个笔记，具体如下：
效果如下
你可能想到的⽅法
padding: 16px;
box-shadow: 0 0 0 8px #655;
border-radius: 5px;
box shadow怎么设置如果采⽤上⾯的⽅式，会产⽣⼀个与上⾯效果很像的效果：内外都是圆⾓。下过如下
如何将外⾯的那层shadow变为直⾓呢？
其关键就是outline和box-shadow属性：元素的圆⾓⽆法规定描边的⽅式
那么你可能会想到这样的实现⽅式
padding: 16px;
outline: 8px solid #655
border-radius: 5px;
然后当你满怀⾃信去查看效果时发现，居然⼜不是你想要的效果，你会发现内外之间会有⼀⼩点空⽩。
那怎么办，是不是bug？虽然元素的圆⾓⽆法规定描边的⾓的样式，但可以规定box-shadow的⾓的样
式，于是解决⽅式诞⽣了：让box-shadow与outline重合，outline将box-shadow的圆⾓填充成直⾓，box-shadow填充outline与内层之间的空⽩
padding: 16px;
box-shadow: 0 0 0 8px #655;
border-radius: 5px;
outline: 8px solid #655;
这时再去刷新浏览器就会发现会是我们想要的效果了
附⼀个完整的例⼦
css learning
.section {
display: inline-block;
width: 200px;
background: gray;
padding: 16px;
box-shadow: 0 0 0 8px #655;
border-radius: 5px;
outline: 8px solid #655;
}
Suspendisse et arcu felis, ac gravida turpis.
Suspendisse potenti. Ut porta rhoncus ligula,
sed fringilla felis feugiat eget.
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持脚本之家。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。