css 文字邊框

 

矩形邊框 可增加border屬性 勾繪出一條邊線 會變成一個圓 以及各種不規則矩形形狀

如一些三角形啊 （可做提示邊邊角,展開收起等狀態）

五六七八邊

平行、梯形、菱形

橢圓，半圓，整個園

月牙，狼牙，小鐵環

....

甚至於 愛心❤ 

 

 

/* 愛心 */

.love {
position: relative;
}
.love:before {
content: "";
width: 70px;
height: 110px;
background: #f00;
position: absolute;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
transform: rotate(45deg);
}
.love:after {
content: "";
width: 70px;
height: 110px;
background: #f00;
position: absolute;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
transform: rotate(-45deg);
left: -30px;
}

鵝蛋頭

 

 

 

 愛吃水果的食人豆

 

/* 食人豆 */

.pacman {
width: 0;
    height: 0;
    border: 60px solid #f00;
    border-right: 60px solid transparent;
    border-radius: 100%;
}

張三豐耍太極

 

 鑽石王老五

 

 好了 就這把

文字邊框 

只需給元素加上-webkit-text-stroke

后接倆 ： px 顏色

圖中為鏤空狀態

可搭配 

color: transparent;

妥妥的了~