纯静态的一种效果绘制，避免使用图标浪费内存。效果如下

废话不多说，代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>circle</title>

    <style type="text/css">

        #app{

            width:300px;height:200px;position: relative;box-sizing: border-box;padding:10px;

        }

        .box{

            width:100%;height:100%;border:2px solid #f00;

        }

        .circle{

            display: block;width:20px;height:20px;border:2px solid transparent;position: absolute;z-index: 1;background:#fff;

        }

        .top-left{

            left:10px;top: 10px;border-right-color: #f00;border-bottom-color: #f00;border-radius:0 0 20px 0;

        }

        .top-right{

            right: 5px;top: 10px;border-left-color: #f00;border-bottom-color: #f00;border-radius:0 0 0 20px;

        }

        .btm-left{

            left: 10px;bottom:6px;border-right-color: #f00;border-top-color: #f00;border-radius:0 20px 0 0;

        }

        .btm-right{

            right: 6px;bottom: 6px;border-left-color: #f00;border-top-color: #f00;border-radius:20px 0 0 0;

        }

    </style>

</head>

<body>

    <div id="app">

        <div class="box"></div>

        <i class="circle top-left"></i>

        <i class="circle top-right"></i>

        <i class="circle btm-left"></i>

        <i class="circle btm-right"></i>

    </div>

</body>

</html>

效果二：

相比第一种效果，增加了四角的曲别针效果，完整代码为：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>circle</title>

    <style type="text/css">

        .cont{

            height:300px;

            box-sizing: border-box;padding:10px;

            position: relative;

        }

        .icon-box{

            width:60px;height:60px;border:2px solid #f00;position: absolute;overflow: hidden;

        }

        .icon-top-left{

            left: 0;top: 0;border-right-color: transparent;border-bottom-color: transparent;border-radius:10px 0 0 0;

        }

        .icon-top-right{

            right: 0;top: 0;border-left-color: transparent;border-bottom-color: transparent;border-radius:0 10px 0 0;

        }

        .icon-btm-left{

            left: 0;bottom: 0;border-right-color: transparent;border-top-color: transparent;border-radius:0 0 0 10px;

        }

        .icon-btm-right{

            right: 0;bottom: 0;border-left-color: transparent;border-top-color: transparent;border-radius:0 0 10px 0;

        }

        .icon-box i{

            display: block;width:18px;height:18px;border-radius:50%;border:2px solid #f00;position: absolute;z-index: 2;

        }

        .icon-top-left i{

            left: -2px;top: -2px;

        }

        .icon-top-right i{

            right: -2px;top: -2px;

        }

        .icon-btm-left i{

            left: -2px;bottom: -2px;

        }

        .icon-btm-right i{

            right: -2px;bottom: -2px;

        }

        .app{

            width:100%;height:100%;

            position: relative;box-sizing: border-box;padding:5px 7px 7px 6px;

        }

        .box{

            width:100%;height:100%;border:2px solid #f00;

        }

        .circle{

            display: block;width:20px;height:20px;border:2px solid transparent;position: absolute;z-index: 1;background:#fff;

        }

        .top-left{

            left:6px;top: 5px;border-right-color: #f00;border-bottom-color: #f00;border-radius:0 0 20px 0;

        }

        .top-right{

            right: 3px;top:5px;border-left-color: #f00;border-bottom-color: #f00;border-radius:0 0 0 20px;

        }

        .btm-left{

            left: 6px;bottom:3px;border-right-color: #f00;border-top-color: #f00;border-radius:0 20px 0 0;

        }

        .btm-right{

            right: 3px;bottom: 3px;border-left-color: #f00;border-top-color: #f00;border-radius:20px 0 0 0;

        }

        .box img{

            display: block;width:100%;height:100%;

        }

    </style>

</head>

<body>

    <div class="cont">

        <div class="icon-box icon-top-left"><i></i></div>

        <div class="icon-box icon-top-right"><i></i></div>

        <div class="icon-box icon-btm-left"><i></i></div>

        <div class="icon-box icon-btm-right"><i></i></div>

        <div class="app">

            <div class="box"><img src="img_src" alt=""></div>

            <i class="circle top-left"></i>

            <i class="circle top-right"></i>

            <i class="circle btm-left"></i>

            <i class="circle btm-right"></i>

        </div>

    </div>

</body>

</html>

css绘制内扣圆角的更多相关文章

  1. css边框内凹圆角，解决优惠券的边框问题

    关于css边框内凹圆角,找了好久才找到的 <html <head> <title>无标题页</title> <style> body{ backg ...

  2. CSS实现多重边框和内凹圆角

    CSS实现多重边框 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...

  3. CSS布局技巧 -- 内凹圆角

    圆角,相信每一个了解CSS属性的都知道,通过border-radius实现圆角(外凸圆角),但是如果需要实现内凹圆角怎么办呢?比如四角内凹的元素,比如如下所示这样的内凹圆角 对于这种问题,很多人的反应 ...

  4. CSS-论css如何纯代码实现内凹圆角

    background-image: radial-gradient(200px at 50px 0px, #fff 50px, #4169E1 50px); 这是做内凹圆角的核心代码,就是背景图的ra ...

  5. CSS 魔法系列：纯 CSS 绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  6. 摘记 史上最强大的40多个纯CSS绘制的图形（一）

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

  7. 史上最强大的40多个纯CSS绘制的图形

    Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { wid ...

  8. 40多个纯CSS绘制的图形

    本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...

  9. css绘制三角形原理

    1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...

随机推荐

  1. GitHub的操作

    一.查看自己的信息:git config --list 修改config文件:01.输入vim ~/.gitconfig(回车) 02.点击 i.o或a 进入编辑模式 03.修改所要修改的信息 04. ...

  2. MySQL 误操作后数据恢复（update,delete忘加where条件）

    在数据库日常维护中,开发人员是最让人头痛的,很多时候都会由于SQL语句写的有问题导致服务器出问题,导致资源耗尽.最危险的操作就是在做DML操作的时候忘加where条件,导致全表更新,这是作为运维或者D ...

  3. python之以字符串形式导入模块

    示例 调用方法 class CorsMiddleware: def process(self): print('from auth.cors.CorsMiddleware.process') cors ...

  4. [LeetCode] 90.Subsets II tag: backtracking

    Given a collection of integers that might contain duplicates, nums, return all possible subsets (the ...

  5. Eclipse Error Reporting Welcome to the Eclipse Error Reporting Service.Do you want to help Eclipse? Enable Disable

    在开发的时候,使用Eclipse IDE,提示如下信息, 这是Eclipse的错误报告,如果不想发送,可以关闭掉,关闭方法: 选择Preferences -> General -> Err ...

  6. word之常用功能

    0.word区域:标题栏.快速访问工具栏.功能区.功能按钮.导航窗口.编辑区.水平垂直滑动条.状态栏 1.更改office主题.文件---帐户---office主题.(传统白色.浅灰色.深灰色) 2. ...

  7. 第二篇——Struts2的Action搜索顺序

    Struts2的Action的搜索顺序: 地址:http://localhost:8080/path1/path2/student.action     1.判断package是否存在,例如:/pat ...

  8. Java数据库连接技术

    使用mysql作为开发数据库,创建user表.创表语句如下: create database learn; use learn; CREATE TABLE user(id INT PRIMARY KE ...

  9. Linux实现VLAN

    交换机的端口有两种配置模式:Access和Trunk. Access口:端口属于VLAN,VLAN ID 1~4096.直接与计算机网卡相连,流入该口的数据包都被打上VLAN的标签. Trunk口:允 ...

  10. 专题8：javascript中事件

    一.事件流 1.1 事件冒泡 冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标的顺序逐一触发: 注意:各个浏览器在处理<html>标记级别的事件时顺序有出入,因此无论任何情况,都 ...