效果图：

实例代码：

 <!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. 网卡多ｉｐ 再看ａｒｐ; arp队列也会缓存skb

    [结论] 当协议失效的时候,skb会挂载arp的neigt的一个链表上,然后直接返回了,相当于数据包发下了,当arp收到数据包去修复neigh的目的地址的时候,会把之前所有的neihe中等待的skb全 ...

  2. BZOJ 1196 公路修建问题(二分+最小生成树)

    题目要求求出图中的一颗生成树,使得最大的边权最小,且满足一级公路的个数>=k. 考虑二分最大边,问题就变为给出的图的生成树中,是否满足所有的边<=val,且一级公路的个数>=k. 所 ...

  3. select、poll、epoll模型对比

    select.poll.epoll模型对比 先说Select:            1.Socket数量限制:该模式可操作的Socket数由FD_SETSIZE决定,内核默认32*32=1024. ...

  4. CenOS 定时任务，at和crontab

    1.一次性定时任务,只执行一次 语法:# at [参数] [时间] at> 执行的指令 退出at命令 ctrl+d 1.1 mini安装版本可能没有预装at 安装at yum -y instal ...

  5. POJ2774：Long Long Message——题解

    http://poj.org/problem?id=2774 给定两个字符串 A 和 B,求最长公共子串. 论文题,把两个串合并起来,比较两个串各自的后缀的height值取最大即可. #include ...

  6. BZOJ1597 & 洛谷2900：[USACO2008 MAR]Land Acquisition 土地购买——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=1597 https://www.luogu.org/problemnew/show/P2900 约翰准 ...

  7. 51nod 1257 背包问题 V3（分数规划）

    显然是分数规划...主要是不会求分数的形式,看了题解发现自己好傻逼QAQ 还是二分L值算出d[]降序选K个,顺便记录选择时候的p之和与w之和就可以输出分数形式了... #include<iost ...

  8. POI 2018.10.27

    [POI2015]LOG 维护一个长度为n的序列,一开始都是0,支持以下两种操作:1.U k a 将序列中第k个数修改为a.2.Z c s 在这个序列上,每次选出c个正数,并将它们都减去1,询问能否进 ...

  9. Eclipse ADT插件 匹配的sdk tools版本

    Eclipse android ADT插件最后的版本为ADT 23.0.7 (August 2015),google不再更新. 和之匹配的android tools版本为SDK Tools r24.1 ...

  10. 【状压DP】【UVA11795】 Mega Man's Mission

    传送门 Description 你要杀n个怪,每杀掉一个怪那个怪会掉落一种武器,这种武器可以杀死特定的怪.游戏初始你有一把武器,能杀死一些怪物.每次只能杀一只,求有多少种杀怪方法. Input 多组数 ...