效果图：

实例代码：

 <!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. 多个表单数据提交下的serialize()应用

    在实际开发场景中,难免遇到需要多个表单的数据传递问题. 之所以要进行多表单的数据传递是因为可以进行数据分组,便于数据的维护. 这个时候,出于不依赖jquery的考虑,有一个原生js函数来解决这个问题无 ...

  2. jquery计算器（改良版）

    代码: <!Doctype html> <html> <meta charset="UTF-8"> <title>计算器</t ...

  3. GSL介绍【转】

    GSL(GNU Scientific Library)是一个C写成的用于科学计算的库,下面是一些相关的包 http://www.thebigdata.cn/JiShuBoKe/5612.html

  4. 【bzoj2929】[Poi1999]洞穴攀行 网络流最大流

    题目描述 洞穴学者在Byte Mountain的Grate Cave里组织了一次训练.训练中,每一位洞穴学者要从最高的一个室到达最底下的一个室.他们只能向下走.一条路上每一个连续的室都要比它的前一个低 ...

  5. web服务器压测工具siege、ab

    web服务器压测工具也挺多,这里只介绍我用过的这两种--siege(for linux).ab(for windows). 一.siege 1.简介: Siege是一款开源的压力测试工具,设计用于评估 ...

  6. 协程-Greenlet

    协程拥有自己的寄存器上下文和栈.协程调度切换时,将寄存器上下文和栈保存到其他地方,在切回来的时候,恢复先前保存的寄存器上下文和栈. 线程切换的时候会保存到CPU里面. 因此: 协程能保留上一次调用时的 ...

  7. [洛谷P1552][APIO2012]派遣

    题目大意:有一棵$n$个点的树,和一个费用$m$,每个点有一个费用和价值,请选一个点,再从它的子树中选取若干个点,使得那个点的价值乘上选的点的个数最大,要求选的点费用总和小于等于$m$ 题解:树形$d ...

  8. [CQOI2014]数三角形 组合数 + 容斥 + gcd

    推导过程 : 组合数+容斥原理+gcd 正确做法是暴力的一种优化,ans=所有情况 - 平行坐标轴的三点共线 - 斜线三点共线 如果快速求斜线三点共线: 首先要知道一个结论,对于点(a,b) (x,y ...

  9. 洛谷 P3620 [APIO/CTSC 2007]数据备份 解题报告

    P3620 [APIO/CTSC 2007]数据备份 题目描述 你在一家 IT 公司为大型写字楼或办公楼(offices)的计算机数据做备份.然而数据备份的工作是枯燥乏味的,因此你想设计一个系统让不同 ...

  10. thread-wait/sleep

    对于sleep()方法,我们首先要知道该方法是属于Thread类中的.而wait()方法,则是属于Object类中的. sleep()方法导致了程序暂停执行指定的时间,让出cpu该其他线程,但是他的监 ...