天天看点
返回

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 内存管理机制，面试别被问住了

继续阅读