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%;

原创笔记

查看全文

相关阅读:
异常
 抽象类
 java基础—接口3
java基础—接口2
java基础—接口1
Android拍照适配方案
 继承—Car
继承—矩形
 使用CSS和jQuery实现tab页
 纯CSS实现圆形进度条

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