【CSS】凹槽的写法

最新推荐文章于 2024-05-05 06:45:37 发布

weixin_30505485

最新推荐文章于 2024-05-05 06:45:37 发布

阅读量532

点赞数

原文链接：http://www.cnblogs.com/wush-1215/p/9791469.html

版权

效果图：

实例代码：

 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>