这是一个简单的凸起的例子.
#test{ width: 200px; height: 200px; background: #888888; border-radius: 50px; }
但是,我想要一个凹边界半径.
我试图使边界半径为负,但这不行.
凹/凸的例子:
解决方法
您可以使用背景中的径向梯度给出凹面边框的印象.例如,像这样:
#test { width: 200px; height: 200px; background: #888888; background: radial-gradient(circle 20px at -20% 50%,transparent,transparent 100px,#888888 100px),radial-gradient(circle 20px at 120% 50%,#888888 100px); background-size:100px 200px,100px 200px; background-position:0 0,100% 0; background-repeat:no-repeat; }
请注意,大多数Webkit浏览器仍然需要径向渐变的前缀,如果要完全支持旧版浏览器,则可能需要实现较旧的渐变语法.
原文地址:https://www.jb51.cc/css/216439.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。