【CSS】凹槽的写法


效果图:

实例代码:

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             #btn {
 9                 display: block;
10                 width: 100px;
11                 height: 40px;
12                 background-color: lightcoral;
13                 text-align: center;
14                 line-height: 40px;
15                 position: relative;
16                 color: #FFF;
17                 font-size: 2em;
18                 margin: 0 auto;
19             }
20             
21             #btn::before {
22                 content: "";
23                 width: 30px;
24                 height: 30px;
25                 border-radius: 30px;
26                 background: #fff;
27                 position: absolute;
28                 display: block;
29                 left: -15px;
30                 top: 5px;
31             }
32         </style>
33     </head>
34 
35     <body>
36         <div id="btn"></div>
37     </body>
38 
39 </html>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM