平常开发常会用到圆角,外凸很好实现,只要直接使用border-radius属性即可。但如果有内凹角的情况,一般都会直接使用背景图片,但如果没有背景图片的话,纯CSS也可以实现这种效果。
简单内凹
要实现这种内凹圆角比较简单,代码如下:
html:
<div class="radius"></div>
css:
通过改变对应方向即可实现 四个角度的内凹圆角,内凹半径就不需要我多说了,调节px就行
下面说个稍复杂的,四角内凹
单独的元素无法通过CSS实现,只能通过复数元素来完成了,代码如下
html:
css:
代码没什么好多说的,简单的四个不同方向的内凹元素通过flex布局来实现,清晰明了, 通过改写内凹半径和container元素宽高就可以简单调节。