css實現div內凹角樣式

平常的開發中我們一般使用到圓角都是外凸的，即border-radius屬性。而如果有內凹角的情況，我們一般的考慮實現方法有2種。一種是直接使用背景圖片，一種是使用css。

用到的屬性則是background或background-image 結合徑向漸變radial-gradient。示例：

background-image: radial-gradient(200px at 50px 0px, #fff 50px, #4169E1 50px);

而對於徑向漸變，主要是3個參數控制。

一個是原點和大小。大小類似border-radius的感覺，原點使用at表示可以指定點的坐標，或使用left、right、top、bottom來表示。

其次是兩個顏色和透明度、大小等。這里50px或百分比，親測第一個只有50才是半圓角，而第二個50px貌似影響不大。

示例：

欲實現圖中淺綠色的四角內凹樣式，沒有素材圖片。

開始：首先給這個div設置好寬高並設置相對定位。然后在其內部放4個絕對定位的元素，設置其寬高等於內凹的尺寸，之后將他們絕對定位固定到4角。然后就是使用上邊的內凹樣式。

需要注意的是，上邊兩個很簡單就完成了，但是下邊兩個角，只設置了位置和內凹位置之后是下邊這樣的：

這就需要再旋轉一下。

完整代碼如下：

css：

.notice_box_cls #commonNotice {
    background-color: #E8F7F2;
    padding: 20px 10px;
}
.notice_box_cls .notice_body0 {
    position: relative;
}
.notice_box_cls .notice_body {
    background:radial-gradient(15px at left top,#fff 50px,#E8F7F2 50%);
    position: absolute;
    left: 0;
    top: 0;
    width: 15px;
    height: 15px;
}
.notice_box_cls .notice_body1 {
    background:radial-gradient(15px at right top,#fff 50px,#E8F7F2 50%);
    position: absolute;
    right: 0;
    top: 0;
    width: 15px;
    height: 15px;
}
.notice_box_cls .notice_body2 {
    background:radial-gradient(15px at right bottom,#fff 50px,#E8F7F2 50%);
    position: absolute;
    left: 0;
    bottom: 0;
    width: 15px;
    height: 15px;
    transform: rotate(90deg);
}
.notice_box_cls .notice_body3 {
    background:radial-gradient(15px at left bottom,#fff 50px,#E8F7F2 50%);
    position: absolute;
    right: 0;
    bottom: 0;
    width: 15px;
    height: 15px;
    transform: rotate(270deg);
}

html：

<div class="notice">
                                    <div class="">
                                        <div class="notice_title">
                                            <span>通知公告</span>
                                        </div>
                                        <div class="notice_body0">
                                            <ul id="commonNotice">
                                                <!--  <li><a href="#" class="fl">湖北省教育信息化S1</a><i class="fr">2017-5-13</i></li>
                                            <li><a href="#" class="fl">湖北省教育信息化S2</a><i class="fr">2017-5-13</i></li>
                                            <li><a href="#" class="fl">湖北省教育信息化S3</a><i class="fr">2017-5-13</i></li>
                                            <li><a href="#" class="fl">湖北省教育信息化S4</a><i class="fr">2017-5-13</i></li>
                                            <li><a href="#" class="fl">湖北省教育信息化S5</a><i class="fr">2017-5-13</i></li>
                                            <li><a href="#" class="fl">湖北省教育信息化S6</a><i class="fr">2017-5-13</i></li>  -->
                                            </ul>
                                            <div class="notice_body">
                                            </div>
                                            <div class="notice_body1">
                                            </div>
                                            <div class="notice_body2">
                                            </div>
                                            <div class="notice_body3">
                                            </div>
                                        </div>
                                    </div>
                                  </div>