效果图：

实例代码：

 <!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. 【Linux】CentOS安装redis

    CENTOS7下安装REDIS 安装完成之后使用:redis-cli命令连接,如图: 提示:/var/run/redis_6379.pid exists, process is already run ...

  2. 第54天：原生js实现轮播图效果

    一.轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过手动点击事件切换图片. 二.Html布局 首先父容器containe ...

  3. Access Denied for user root @localhost 解决方案

    问题描述: C:\Users\bo.wang> mysql -u root -p Enter password: ERROR 1045 (28000): Access denied for us ...

  4. Python程序性能分析模块----------cProfile

    cProfile分析器可以用来计算程序整个运行时间,还可以单独计算每个函数运行时间,并且告诉你这个函数被调用多少次 def foo(): pass import cProfile cProfile.r ...

  5. CentOS 文件搜索find

    1.文件搜索,内置的的命令是find 用法: find [查找路径] 寻找条件 操作 默认路径为当前目录:默认表达式为 -print 2.主要参数: -name 匹配名称 -perm 匹配权限(mod ...

  6. 【题解】APIO2018 Duathlon 铁人两项

    首先对于给出的图建立圆方树,然后我们分类讨论每一个点作为中间的中转站出现的情况有多少种,累积到 \(ans\) 中. 对于圆点:在任意两个子树内分别选出一个节点都是合法的. 对于方点:连接向方点的点均 ...

  7. HDU4757：Tree——题解

    http://acm.hdu.edu.cn/showproblem.php?pid=4757 给一棵有点值的树,每次询问u~v的最短路当中的一个点的点权异或z最大值. 前置技能:HDU4825 前置技 ...

  8. BZOJ4539 [Hnoi2016]树 【倍增 + 主席树】

    题目链接 BZOJ4539 题解 我们把每次复制出来的树看做一个点,那么大树实际上也就是一棵\(O(M)\)个点的树 所以我们只需求两遍树上距离: 大树上求距离,进入同一个点后在模板树上再求一次距离 ...

  9. [NOIP 2017]棋盘

    题目描述 有一个 m×m 的棋盘,棋盘上每一个格子可能是红色.黄色或没有任何颜色的.你现在要从棋盘的最左上角走到棋盘的最右下角. 任何一个时刻,你所站在的位置必须是有颜色的(不能是无色的), 你只能向 ...

  10. ucenter通信实现同步登录、同步退出(详细)

    首先,需要去官网下载一个ucenter的包.然后解压下来. 先把ucenter/ucenter这个文件夹复制到你的项目根目录下改名为uc_server;(这里只是我建议修改,以便于我下面写的配置); ...