CSS样式：DIV四中圆形，左右两侧凹陷下去

ゝ一世哀愁。 2022-09-01 14:51 171阅读 0赞

# 效果如图： #

![20210728172439510.png][]

#  CSS代码： #

<!DOCTYPE html>
    <html>
        <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>
          .btn {
            width: 200px;
            text-align: center;
            height: 50px;
            line-height: 50px;
            background: #fff;
            color: #fff;
            position: relative;
    		border-radius:10px;
    		border:1px solid #f66;
    		
          }
          .btn:after {
            position: absolute;
            content: '';
            width: 10px;
            height: 20px;
            background: #fff;
            top: 13px;
            right: -1px;
            border-radius: 10px 0 0 10px;
    		border:1px solid #f66;
    		border-right:none;
    		
    		
          }
    	  .btn:before {
            position: absolute;
            content: '';
            width: 10px;
            height: 20px;
            background: #fff;
            top: 13px;
            left: -1px;
    		border-radius: 0 10px 10px 0 ;
    		border:1px solid #f66;
    		border-left:none;
    	
          }
        </style>
    </head>
    <body>
     <div class="btn">
       button
     </div>
        </body>
    </html>

[20210728172439510.png]: /images/20220829/a5a9a09468564d1abf14be762300a52b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，171人围观）

还没有评论，来说两句吧...

相关阅读

相关 div靠边隐藏_div css隐藏内容样式方法

div+css隐藏内容方法一般情况下，css隐藏的用途,如下： 1、对文本的隐藏 2、隐藏超链接(另类黑链) 3、对统计代码隐藏 4、隐藏超出图片 5、css隐藏

柔情只为你懂/ 2023年01月08日 06:27/ 0 赞/ 138 阅读

相关 CSS样式——div居中方法

1、绝对居中给div设置样式，div默认显示位置为body的左上方。 width: 400px; height: 300px;

比眉伴天荒/ 2022年12月17日 01:26/ 0 赞/ 154 阅读

相关 div css注册信息表单样式

[下载地址][Link 1]div css制作简单的账号，密码，电话号码，验证码注册表单提交代码。可设置表单必填项功能。 ![1631561557.png][] dd:

比眉伴天荒/ 2022年09月11日 11:13/ 0 赞/ 152 阅读

相关 CSS样式：DIV四中圆形，左右两侧凹陷下去

效果如图： ![20210728172439510.png][] CSS代码： <!DOCTYPE html> <html> <

ゝ一世哀愁。/ 2022年09月01日 14:51/ 0 赞/ 172 阅读

相关 JS 左右两侧浮动广告

<html> <title>左右两侧浮动广告</title> <head> </head> <body> <table styl

╰+攻爆jí腚メ/ 2022年08月06日 00:27/ 0 赞/ 202 阅读

相关 CSS+DIV网页样式与布局

一、什么是CSS? CSS(Cascading Style Sheets),中文译为层叠样式表，它是用于控制网页样式并允许将样式信息与网页内容分离的一种标

傷城~/ 2022年08月05日 02:19/ 0 赞/ 254 阅读

相关 DIV CSS字体居中实现DIV文字水平左右居中

> DIV CSS字体居中实现DIV CSS文字水平左右居中-css+div字体文字内容居中篇，使用DIV CSS实现字体居中的CSS样式单词为text-align，其值为ce

淩亂°似流年/ 2022年08月03日 15:40/ 0 赞/ 300 阅读

相关 CSS.DIV网页样式与布局总结

前言从开始进入BS这个项目的学习时就用到了CSS，现在主要对CSS内容的学习做一个总结，视频一共有20章由基础到应用层层深入。整体概况 ![Center

亦凉/ 2022年07月14日 13:28/ 0 赞/ 225 阅读

相关 css实现div内凹角样式

平常的开发中我们一般使用到圆角都是外凸的，即border-radius属性。而如果有内凹角的情况，我们一般的考虑实现方法有2种。一种是直接使用背景图片，一种是使用css。用

缺乏、安全感/ 2021年12月05日 15:31/ 0 赞/ 439 阅读

相关 css样式设置标题左右短横线

效果： ![在这里插入图片描述][20200204154633180.png_pic_center] 附代码： <view class="content-ti

﹏ヽ暗。殇╰゛Y/ 2021年09月13日 15:42/ 0 赞/ 476 阅读