效果图：

实例代码：

 <!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获取指定长度的字符串

    from random import Random def random_str(randomlength=31): str = '' chars = 'abcdefghijklmnopqrstuvw ...

  2. 敏捷冲刺Day2

    一. 每日会议 1. 照片 2. 昨日完成工作 网页设计与实现的完善 服务器的搭建前期--申请域名 激活域名 搭建服务器 分析接下来的任务与进度 总结前两天的工作 对产品的进一步展望 3. 今日完成工 ...

  3. 第一章 持续集成jenkins工具使用之部署

    1.1 硬件要求 内存:至少512MB 磁盘空间:10G JDK8 最好同时安装jre 从官网https://jenkins.io/download/下载最新的war包(Generic Java Pa ...

  4. phpmyadmin中缺少mysqli扩展 的结解办法

    修改 ;extension=php_mysqli.dll  去掉前面的 ;     以及 调整 php文件夹的目录位置.     这个办法是不是好使,我不确定.这个方法只适合 用win系统 这个,貌似 ...

  5. perf打印调用栈的过程

    perf_prepare_sample-->perf_callchain-->get_perf_callchain 上面的调用栈会使用 perf_event_output--> 0x ...

  6. arp获取

    getarp.c /* getarp.c -- This simple program uses an IOCTL socket call to read an entry */ /* from th ...

  7. 三节点搭建openstack-Mitaka版本

    前言: 现在的云计算平台已经非常火,也非常的稳定了.像阿里云平台,百度云平台等等,今天咱们基于openstack来搭建一个云平台 注意: 本次平台搭建为三节点搭建(没有外部存储节点,所有存储为本地存储 ...

  8. BZOJ4771 七彩树（dfs序+树上差分+主席树）

    考虑没有深度限制怎么做.显然的做法是直接转成dfs序上主席树,但如果拓展到二维变成矩形数颜色数肯定没法做到一个log. 另一种做法是利用树上差分.对于同种颜色的点,在每个点处+1,dfs序相邻点的lc ...

  9. 欢迎大家收听喜马拉雅，我的主播频道http://m.ximalaya.com/weizhubo/44966139

    关注光荣之路软件技术培训账号,即时收取测试开发技术的免费公开课信息,各大公司测试及开发招聘信息.最新的技术咨询.线下测试 喜马拉雅微电台,每天早晨光荣之路创始人吴老,都会跟大家一起分享测试行业心得体会 ...

  10. UVA.12096 The SetStack Computer ( 好题 栈 STL混合应用)

    UVA.12096 The SetStack Computer ( 好题 栈 STL混合应用) 题意分析 绝对的好题. 先说做完此题的收获: 1.对数据结构又有了宏观的上的认识; 2.熟悉了常用STL ...