<!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. SWF 文件不能本地访问 只有仅限于文件系统的 SWF 文件

    http://blog.163.com/vituk93@126/blog/static/1709580342012512112757505/ SWF 文件不能被本地访问 不能访问本地 只有仅限于文件系 ...

  2. java_main

    Java中用户向系统传递参数的三种基本方式 main方法 在Java中,main()方法是Java应用程序的入口方法,也就是说,程序在运行的时候,第一个执行的方法就是main()方法,这个方法和其他的 ...

  3. 初始Openwrt

    系统结构 在上一章我们已经完成了刷机工作,这个时候系统进行了首次启动,并且格式化了它的"可写"分区.那么在设备里分区到底是怎么样进行的呢?我们首先需要知道:不同的处理器下OpenW ...

  4. Wireshark常用过滤使用方法

    过滤源ip.目的ip. 在wireshark的过滤规则框Filter中输入过滤条件.如查找目的地址为192.168.101.8的包,ip.dst==192.168.101.8:查找源地址为ip.src ...

  5. 两个简单的API限流实现方案

    1, Ngnix限流 Nginx在架构中起到请求转发与负载均衡器的作用.外部req首先到Nginx监听的80端口,然后Nginx将req交给到监听8080端口的APP服务器处理.处理结果再经由Ngin ...

  6. 学习concurrency programming进展

    看了一段时间的actor model,goroutine之类的东东,最近在github上写了个简单的框架, 注:未做大量测试,仅供学习用,勿用于生产用途 链接: https://github.com/ ...

  7. Hadoop JAVA HDFS客户端操作

    JAVA HDFS客户端操作 通过API操作HDFS org.apache.logging.log4jlog4j-core2.8.2org.apache.hadoophadoop-common${ha ...

  8. swiper4 一个页面多个轮播

    <div class="swiper-container"> <div class="swiper-wrapper"> <div ...

  9. 排序算法<No.7>【希尔排序】

    排序算法进入到第7篇,这个也还是比较基础的一种,希尔排序,该排序算法,是依据该算法的发明人donald shell的名字命名的.1959年,shell基于传统的直接插入排序算法,对其性能做了下提升,其 ...

  10. Avalon总线学习 ---Avalon Interface Specifications

    Avalon总线学习 ---Avalon Interface Specifications 1.Avalon Interfaces in a System and Nios II Processor ...