css實現四種常見邊框內外角組合

div1:邊框內外直角矩形;div2:邊框內外圓角矩形;

div3:邊框內直角外圓角;div4:邊框內圓角外直角。

div1,2,3,4稱呼它們吧。

 .font{            color:#00ff00;            text-align: center;        }        .divSize{            margin:2em;            width:5em;            height:5em;            display: inline-block;        }複製程式碼

div1,2,3的HTML程式碼實現:

 <div class="divSize div1 font">div1</div> <div class="divSize div2 font">div2</div> <div class="divSize div3 font">div3</div>複製程式碼

div4的程式碼稍後再說。

div1

div1 CSS程式碼:

 .div1{/*邊框內外直角矩形*/            border:1em solid #eee;      }

複製程式碼

div2和div3

div2 CSS程式碼:

.div2{/*邊框內外圓角矩形*/
            border:1em solid #eee;
            border-radius:2em;
       }
複製程式碼

div3 CSS程式碼:

.div3{/*邊框內直角外圓角*/
            border:1em solid #eee;
            border-radius:1em;
        }
複製程式碼

當border小於border-radius的值時，便會呈現邊框內外圓角矩形的形狀，

而當border大於等於border-radius的值時，便會呈現邊框內直角外圓角的形狀。

最後便是相比上面較難實現的div4:

這裡給出兩種解決方案。

①CSS程式碼:

.div4{/*邊框內圓角外直角*/
          background:#eee;
          padding:1em;
        }
        .div4>div{
            height:5em;
            background: black;
              border-radius:.8em;
            
        }
複製程式碼

HTML程式碼:

<div class="divSize div4 font">
               <div>div4</div>
 </div>
複製程式碼

②相對第一種使用兩個元素的情況，第二種方案只需要一個元素:

CSS程式碼:

.div4{/*邊框內圓角外直角*/
            width: 3em;
            height:3em;
          border-radius:1em;
          padding:1em;
          box-shadow:0 0 0 1em #eee;
          outline: 1em solid #eee;
        }
複製程式碼

HTML程式碼:

<div class="divSize div4 font">div4</div>
複製程式碼

結束語

當然，使用以上方法不僅僅能實現div1~4,可以通過單獨設定每個角的值，完成多種不規則形狀展示，例如將border-radius:2em;改成border-radius:1em 2em;便可以得到以下形狀，更多的形狀，有興趣的小夥伴可以自己嘗試。