zoukankan html css js c++ java

css3凹角效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>css</title>
</head>
<body>
<style>
#a {
    width: 150px;
    height: 300px;
    background: radial-gradient(circle at top left,
    transparent 15px, #e6e4b7 0) top left,
    radial-gradient(circle at top right,
            transparent 15px, #e6e4b7 0) top right,
    radial-gradient(circle at bottom right,
            transparent 15px, #e6e4b7 0) bottom right,
    radial-gradient(circle at bottom left,
            transparent 15px, #e6e4b7 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    padding: 20px 24px 22px 20px;
    filter: drop-shadow(2px 2px 10px red);
}
#b {
    display: block;
    background: radial-gradient(circle at top left,
    transparent 15px, red 0) top left,
    radial-gradient(circle at top right,
            transparent 15px, red 0) top right,
    radial-gradient(circle at bottom right,
            transparent 15px, red 0) bottom right,
    radial-gradient(circle at bottom left,
            transparent 15px, red 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    width:100%;
    height: 100%;
    padding: 2px;
}
#b:before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background: radial-gradient(circle at top left,
    transparent 15px, #e6e4b7 0) top left,
    radial-gradient(circle at top right,
            transparent 15px, #e6e4b7 0) top right,
    radial-gradient(circle at bottom right,
            transparent 15px, #e6e4b7 0) bottom right,
    radial-gradient(circle at bottom left,
            transparent 15px, #e6e4b7 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}
</style>

    <div id="a">
        <div id="b"></div>
    </div>
</body>
</html>

内凹圆角的实现

background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
            radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
            radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left,
            radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right;
background-repeat: no-repeat;
background-size: 50% 50%;

原创笔记

查看全文

相关阅读:
C#与数据库访问技术总结（十四）之DataAdapter对象
 《运维三十六计》：运维生存宝典
 企业运维几百个重点面试题汇总(老男孩)
5、KVM虚拟化典型案例：生产环境问题案例与分析
 Linux运维必会的实战编程笔试题（19题）
面试中常见的 MySQL 考察难点和热点
 Linux系统运维常见面试简答题（36题）
一键备份脚本 backup.sh
Linux常用的200个命令总结分类
 2、KVM虚拟化CPU、内存、网络、磁盘技术及性能调优方法

原文地址：https://www.cnblogs.com/minty/p/6650170.html