效果图：

实例代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             #btn {

                 display: block;

                 width: 100px;

                 height: 40px;

                 background-color: lightcoral;

                 text-align: center;

                 line-height: 40px;

                 position: relative;

                 color: #FFF;

                 font-size: 2em;

                 margin: 0 auto;

             }

             #btn::before {

                 content: "";

                 width: 30px;

                 height: 30px;

                 border-radius: 30px;

                 background: #fff;

                 position: absolute;

                 display: block;

                 left: -15px;

                 top: 5px;

             }

         </style>

     </head>

     <body>

         <div id="btn"></div>

     </body>

 </html>

【CSS】凹槽的写法的更多相关文章

  1. CSS hack的写法

    css hack简单的说就是由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致 ...

  2. 下面css hack的写法分别用于哪些浏览器

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  3. CSS Sprites(基本写法，怎样使用)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/XTQueen_up/article/details/37601361 说白就是用样式表切一个大图片 ...

  4. CSS三角的写法（兼容IE6）

    目录 简介 优点 原理 1. 先创建一个div 2. 然后给div设定边框. 3. 给div的四个边框都设置不同的颜色 4. 把宽度和高度都变成0 5. 其余角为透明 6. 兼容IE6浏览器 造成这样 ...

  5. CSS三种写法的优先级

    在HTML文件中引入CSS样式有三种方法: 外部样式:通过link标签引入CSS样式: 内页样式:写在HTML页面里面的style标签里面: 行内样式:写在对应标签的style属性里面. 我知道一般情 ...

  6. CSS浏览器兼容性写法小结

    *        , ie6,ie7可以识别: _和- ,  ie6可以识别: !important  ,表示高优先级,ie7及以上,firefox都支持,ie6认识带!important的样式属性, ...

  7. Less 关于css hack的写法

    由于工作需要,最近一直在弄css转写less,遇到最多的问题就是 hack的写法,一些IE的hack,less不支持编译: 常见的不支持的hack如下: IE的滤镜写法 \9\0    IE8部分支持 ...

  8. IE浏览器兼容问题(上)——html和css的兼容写法

    用户使用的浏览器五花八门,我们要保证每一种浏览器都能兼容我们的代码,不能要求用户去改变浏览器,那么就得在我们的代码上下功夫.此时我们要用到hack. HACK就是针对不同的浏览器写不同的HTML.CS ...

  9. css学习_写法规范、选择器

    1.css(层叠样式表)样式主要目的(让页面更好看些) css尽量不要写内联样式,保证结构和样式分离原则: html专门负责结构,css专门负责样式. 2.css写法规范 选择器  { 属性 :值 : ...

随机推荐

  1. python爬虫 --- 简书评论

    某些网站的一些数据是通过js加载的 ,所以爬取下来的数据拿不到, 找到评论的地址 .进行请求获取评论数据 #coding=utf-8 import json import requests def r ...

  2. NeoLoad系列- 快速上手教程

    1.新建工程 2.点击录制脚本按钮 3.在弹出的开始录制对话框中,填写虚拟用户信息. Record in下拉框,用来填写用户路径,一般有三个容器组成: Init, Actions, and End.当 ...

  3. tomcat执行shutdown.sh进程残留的解决办法

    我们执行shutdown.sh指令的时候有时会发现进程并没有被关掉而是越来越多,这种情况一般是项目造成的,具体原因未去调查.由于tomcat自己有相应的保护机制,所以我们只需要强制结束其进程即可,下面 ...

  4. 【题解】SCOI2007组队

    恩……为什么大家都这么执着于 \(O(n^{2})\) 的复杂度捏?如果接受 \(O(n^{2} + nV)\) 的复杂度,那这题可不是道**题吗( • ̀ω•́ )✧ 首先把所有的人按照身高排个序, ...

  5. BZOJ3456：城市规划——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=3456 求出n个点的简单(无重边无自环)无向连通图数目 模数很熟悉,先敲一个NTT. 然后通过推导式 ...

  6. Spark获取某个手机号在某个基站下停留的时间和当前手机所在的位置的案例

    1.业务需求 在拥有手机号在每个基站处停留时间日志 和 基站信息的 算出某个手机号的(所在基站,停留时间),(当前所在经度,当前所在纬度) 其中手机连接基站产生的日志信息类似如下: 186888888 ...

  7. apache的作用和tomcat的区别

    经常在用apache和tomcat等这些服务器,可是总感觉还是不清楚他们之间有什么关系,在用tomcat的时候总出现apache,总感到迷惑,到底谁是主谁是次,因此特意在网上查询了一些这方面的资料,总 ...

  8. HDU 4771 (DFS+BFS)

    Problem Description Harry Potter has some precious. For example, his invisible robe, his wand and hi ...

  9. bzoj 1811: [Ioi2005]mea 贪心，乱搞

    [Ioi2005]mea Time Limit: 20 Sec  Memory Limit: 64 MBSubmit: 690  Solved: 257[Submit][Status][Discuss ...

  10. 手脱ASProtect v1.23 RC1(无Stolen Code)

    1.载入PEID ASProtect v1.23 RC1 2.载入OD,不勾选内存访问异常,其他异常全部勾选 > 01C04200 push 跑跑排行.0042C001 ; //入口处 E8 c ...