天天看點
傳回

css僞類實作矩形按鈕的右邊緣中間有一個往裡凹陷的小半圓

效果如圖所示：

css僞類實作矩形按鈕的右邊緣中間有一個往裡凹陷的小半圓

使用css僞類： 

<!DOCTYPE html>
<html>
<head>
    <title>button</title>
    <meta charset="utf-8" lang="gb23123">
    <style type="text/css">
        .btn{
            width: px;
            height: px;
            color: #FFF;
            font-size: em;
            text-align: center;
            line-height: px;
            background-color: black;
            top:%;
            left: %;
            margin-top: -px;
            margin-left: -px;
            position: absolute;
        }
        .btn::after{
            width: px;
            height: px;
            content: "";        
            right: -px;
            top: px;
            position: absolute;
            display: block; 
            background: #FFF;
            border-radius: px;
        }
    </style>
</head>
<body>
    <buton class="btn">button</buton>
</body>
</html>
CSS特效 css 僞類 按鈕 凹陷 class
上一篇: css的background-image屬性&amp;html的img标簽
下一篇: 探索 Java 記憶體管理機制，面試别被問住了

繼續閱讀