CSS 伪类实现弧形


.head-section{
    width: 100%;
    height: 360px;
    position: relative;
    z-index: -1;
    overflow: hidden;
}
.head-section::after{
    content: '';
    display: block;
    width: 160%;
    height: 200%;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: -100%;
    transform: translateX(-50%);
    background: #1677D2;
    background-image: linear-gradient(150deg, #084797, #007AFF);
}


声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏
随机推荐
JavaScript 代码混淆加密工具 javascript-obfuscator
Linux 网络流量监控 iftop
JavaScript 中 0.1 加 0.2 不等于 0.3 的原因和解决方法
Flame 插件
Node.js MySQL2 如何编写事务
MySQL 的 sql_mode 模式介绍:为什么 MySQL 中 int,float,double 类型字段插入空字符时自动转为0
Debian11 安装笔记3:安装 MySQL 5.7
Node.js 18.x 开始支持内置单元测试