<!DOCTYPE html>

<html lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>css</title>

</head>

<body>

<style>

#a {

    width: 150px;

    height: 300px;

    background: radial-gradient(circle at top left,

    transparent 15px, #e6e4b7 0) top left,

    radial-gradient(circle at top right,

            transparent 15px, #e6e4b7 0) top right,

    radial-gradient(circle at bottom right,

            transparent 15px, #e6e4b7 0) bottom right,

    radial-gradient(circle at bottom left,

            transparent 15px, #e6e4b7 0) bottom left;

    background-size: 50% 50%;

    background-repeat: no-repeat;

    padding: 20px 24px 22px 20px;

    filter: drop-shadow(2px 2px 10px red);

}

#b {

    display: block;

    background: radial-gradient(circle at top left,

    transparent 15px, red 0) top left,

    radial-gradient(circle at top right,

            transparent 15px, red 0) top right,

    radial-gradient(circle at bottom right,

            transparent 15px, red 0) bottom right,

    radial-gradient(circle at bottom left,

            transparent 15px, red 0) bottom left;

    background-size: 50% 50%;

    background-repeat: no-repeat;

    width:100%;

    height: 100%;

    padding: 2px;

}

#b:before {

    content: "";

    width: 100%;

    height: 100%;

    display: block;

    background: radial-gradient(circle at top left,

    transparent 15px, #e6e4b7 0) top left,

    radial-gradient(circle at top right,

            transparent 15px, #e6e4b7 0) top right,

    radial-gradient(circle at bottom right,

            transparent 15px, #e6e4b7 0) bottom right,

    radial-gradient(circle at bottom left,

            transparent 15px, #e6e4b7 0) bottom left;

    background-size: 50% 50%;

    background-repeat: no-repeat;

}

</style>

    <div id="a">

        <div id="b"></div>

    </div>

</body>

</html>

内凹圆角的实现

1
2
3
4
5
6
background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
            radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
            radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left,
            radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right;
background-repeat: no-repeat;
background-size: 50% 50%;

css3凹角效果的更多相关文章

  1. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  2. Hover.css：一组超实用的 CSS3 悬停效果和动画

    Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...

  3. 10个实用的 CSS3 按钮效果制作教程

    人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...

  4. 学习制作精美 CSS3 按钮效果的10个优秀教程

    由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...

  5. Cool！15个创意的 CSS3 文本效果【下篇】

    这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...

  6. CSS3 动画效果带来的bug

    css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...

  7. animate.css 一些常用的CSS3动画效果

    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...

  8. [HTML] CSS3 文本效果

    CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow word-wrap 浏览器支持

  9. css3 文本效果

    CSS3 文本效果   1 CSS3 文本阴影在 CSS3 中,text-shadow 可向文本应用阴影,能够规定水平阴影.垂直阴影.模糊距离,以及阴影的颜色.text-shadow: 5px 5px ...

随机推荐

  1. MySQL Replication--跳过复制错误

    在MySQL中,有两种跳过复制错误的方法:1.对于未使用GTID的复制,可以使用sql_slave_skip_counter来跳过错误2.对于使用GTID的复制,可以使用GTID_NEXT模拟空事务来 ...

  2. 创建一个简单的terraform module

      terraform module可以实现代码的复用,同时方便分享,下面创建一个简单的基于localfile && template provider 的module module ...

  3. Generic Realtime Intermediary Protocol

    转自:https://pushpin.org/docs/protocols/grip/ Introduction The Generic Realtime Intermediary Protocol ...

  4. Java多线程知识总结（一）

    一.创建线程的三种方式: 创建线程的方式有三种,一是创建Thread实例,二是实现Runnable接口,三是实现Callable接口,Runnable接口和Callable接口的区别是一个无返回值,一 ...

  5. 基于STM32的红外遥控重点解析

    本文有两个内容:一.红外遥控协议的的讲解:二.解码程序解析(参考正点原子的代码) 红外的介绍.优点.缺点就不给大家说了,进入正题 一.红外遥控协议的的讲解 红外遥控的编码目前广泛使用的是:NEC Pr ...

  6. DLL的晚绑定与早绑定

    调用DLL中的函数可分为早绑定与晚绑定! 早绑定是指在编译期就已经确定函数地址! 晚绑定是指在运行期动态加载dll,并根据查表的方式获取dll内exports函数的地址,由于早绑定比较简单,在此不再讲 ...

  7. oracle中delete、truncate、drop的区别

    oracle中delete.truncate.drop的区别 标签: deleteoracletable存储 2012-05-23 15:12 7674人阅读 评论(0) 收藏 举报  分类: ora ...

  8. HTTP协议之chunk介绍

    http chunked 当客户端向服务器请求一个静态页面或者一张图片时,服务器可以很清楚的知道内容大小,然后通过Content-Length消息首部字段告诉客户端需要接收多少数据.但是如果是动态页面 ...

  9. django1.10.3下admin后台管理老是显示object

    在设置了一个新models phone book后,admin管理显示数据名称都是object 尝试为model重写__unicode__方法后无效,经查询,在py3环境中,需要重写__str__方法 ...

  10. 初识React：使用React完成Hello World程序

    正式学习React之前,通过一个简单的Hello Word程序来感受一下. <!DOCTYPE html> <html lang="zh-cn"> < ...