效果图:

【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 ></div>
37     </body>
38 
39 </html>

 

相关文章:

  • 2022-12-23
  • 2021-07-01
  • 2022-01-10
  • 2021-09-06
  • 2022-12-23
  • 2022-12-23
  • 2021-06-03
  • 2021-12-06
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-11-09
  • 2022-12-23
  • 2022-01-10
相关资源
相似解决方案