css3特殊图形（气泡）

一、气泡

效果：

        body{
            background: #dd5e9d;
            height: 100%;
        }
        .paopao {
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-image: radial-gradient(rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 1) 80%);
            transform: translateX(50%);
            will-change: top, left; /*增强页面渲染性能*/
        }
        .paopao::after {
            content: '';
            position: absolute;
            top: 20%;
            right: 25%;
            width: 33%;
            height: 33%;
            border: 3px solid;
            border-color: rgba(255, 255, 255, 0.8) transparent transparent transparent;
            border-radius: 50%;
            transform: rotate(45deg);
        }

 

转载于:https://www.cnblogs.com/hjbky/p/8655954.html