效果图：

实例代码：

 <!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. Qt单元测试（QTestLib）

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:Qt单元测试(QTestLib)     本文地址:http://techieliang.co ...

  2. dedecms给原模型添加新字段

    1.进入dedecms后台 2.点击核心=>频道模型=>内容模型管理(在这里可以看到dedecms预设的模型设置) 3.选中我们需要的模型,点击更改,跳入以下页面 4.点击字段管理(可以看 ...

  3. Redis 学习之主从复制

    该文使用centos6.5 64位    redis3.2.8 主从复制 Redis的复制功能是支持多个数据库之间的数据同步.一类是主数据库(master)一类是从数据库(slave),主数据库可以进 ...

  4. pyHeatMap生成热力图

    库链接:https://pypi.org/project/pyheatmap/ 现在的linux系统默认都是安装好的py环境,直接用pip进行热力库安装 pip install pyheatmap 或 ...

  5. c# 调用c++ 使用指针传递的时候

    http://www.cnblogs.com/warensoft/archive/2011/12/09/warenosoft3d.html 上面这篇文章很好解释了. 简单记录一下: 1. 声明  注意 ...

  6. python函数入门到高级

    函数的定义: def test(x): "The function definitions" x+=1 return x def:定义函数的关键字 test:函数名 ():内可定义 ...

  7. snmpwalk的报文检测

    1.先用nc起一个监听的端口,然后看报文是不是正确的: 注:nc是一个模拟各种网络协议的东西,模拟服务器.客户端等: 2.触发告警,让他发报文: 3.用nc模拟一个服务端,启动一个udp的端口163: ...

  8. 【刷题】洛谷 P2709 小B的询问

    题目描述 小B有一个序列,包含N个1~K之间的整数.他一共有M个询问,每个询问给定一个区间[L..R],求Sigma(c(i)^2)的值,其中i的值从1到K,其中c(i)表示数字i在[L..R]中的重 ...

  9. [USACO06NOV]玉米田Corn Fields 状压DP

    题面: 农场主John新买了一块长方形的新牧场,这块牧场被划分成M行N列(1 ≤ M ≤ 12; 1 ≤ N ≤ 12),每一格都是一块正方形的土地.John打算在牧场上的某几格里种上美味的草,供他的 ...

  10. [ZJOJ2007]时态同步 贪心

    不是很懂为什么luogu标签是树形DP,感觉我想的就是一个贪心啊... 随机造几组数据,我们发现贪心的确可以得到最优解,那么为什么呢? 假设将所有时态贪心的调整是对的,那么如果一个节点的各个儿子时态不 ...