<!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. day 26 网络通讯流程 初识socke

    一. *** C/S架构:客户端(client)/服务端(server)架构, B/S架构:浏览器(browser) / 服务端(server)架构 软件cs架构:浏览器,qq,微信,陌陌等等 硬件c ...

  2. mysql创建部分索引

    mysql中,字符串如何建立索引的(本文中截取一部分) 只对字符串的前几个字符进行索引.通过字符串的前几个字符我们已经能大概排序字符串了,剩下不能排序的可以通过遍历进行查找啊,这样只在B+树中存储字符 ...

  3. 一个简单的web.py论坛

    一.概述 forum是一个简单的web.py论坛,后端采用Python+web.py+MySQL,前端采用HTML+CSS+JavaScript+jQuery+RequireJS. 该论坛的主要功能包 ...

  4. ML（1）——机器学习简述

    简述 机器学习是人工智能的一种实现方式:深度学习是一种实现机器学习的技术,或者说是一种特殊的机器学习方法,可以说广义上的机器学习也包括了深度学习,三者的关系如下图所示: 从判别垃圾邮件到无人驾驶技术, ...

  5. php 过滤器filter_var验证邮箱/url/ip等

    验证邮箱.url或者ip,除了使用正则外,也可以使用内置的函数库过滤器filter来完成这些功能. filter_var (PHP 5 >= 5.2.0, PHP 7)filter_var — ...

  6. Jmeter实现接口自动化测试

    一.环境准备 1.Jdk1.7或以上: 下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133 ...

  7. 深入理解ASP.NET MVC（5）

    系列目录 回顾 系列的前4节深入剖析了ASP.NET URL路由机制,以及MVC在此基础上是如何实现Areas机制的,同时涉及到inbound和outbound很多细节部分.第2节中提到MvcRout ...

  8. Java面试题 corejava(一)

    1.面向对象的特征有哪些方面? [基础] 答:面向对象的特征主要有以下几个方面: 1)抽象:抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问 ...

  9. Python 基础语法+简单地爬取百度贴吧内容

    Python笔记 1.Python3和Pycharm2018的安装 2.Python3基础语法 2.1.1.数据类型 2.1.1.1.数据类型:数字(整数和浮点数) 整数:int类型 浮点数:floa ...

  10. 自然语言处理之：搭建基于HanLP的开发环境（转）

    环境搭建比FNLP的简单,具体参考:https://github.com/hankcs/HanLP 各个版本的下载:https://github.com/hankcs/HanLP/releases 完 ...