前端问题,关于HTML5,CSS3,制作一个空心圆

html-css06

前端问题,关于HTML5,CSS3,制作一个空心圆,第1张

你可以试试2个div都设一下背景,一个模糊的放底层,清晰的放上层,通过控制清晰的那个div的位置和背景位移来达到你要的效果,或者你网上搜一下模糊滤镜的js脚本来实现,当然,如果你那个清晰的圆形的位置是固定不变的,那么你还是把这个效果用ps做成一张图是最好的,这也是最方便的,做网页设计不要纠结于技巧,能用最简单的方式达到效果是最好的方式,如果是我,我肯定就是做2个图片来实现效果最简单快捷

你可以把border-image.png中间镂空,然后在CSS中用border-image的时候,下刀的位置刚好是镂空位置的边缘,就可以实现你要的效果,如下图:

当然,效果的好坏处决于你所镂空的位置、下刀的位置和设置border的大小