关于css边框内凹圆角，找了好久才找到的

  1. <html
  2. <head>
  3.     <title>无标题页</title>
  4.     <style>
  5. 		body{
  6. 			background:#999
  7. 		}
  8. .raidal1 {
  9.     height: 100px;
  10.     width: 100px;
  11.     background:radial-gradient(200px at left top,transparent 50%,#fff 50%);
  12. }
  13.  
  14. /* 右上 */
  15. .raidal2 {
  16.     height: 100px;
  17.     width: 100px;
  18.     background:radial-gradient(200px at right top,transparent 50%,#fff 50%);
  19. }
  20.  
  21. /* 右下 */
  22. .raidal3 {
  23.     height: 100px;
  24.     width: 100px;
  25.     background:radial-gradient(200px at right bottom,transparent 50%,#fff 50%);
  26. }
  27.  
  28. .raidal4 {
  29.     height: 100px;
  30.     width: 100px;
  31.     background:radial-gradient(200px at left bottom,transparent 50%,#fff 50%);
  32. }
  33. .ellipse {
  34.    height: 100px;
  35.    width: 100px;
  36.    background:radial-gradient(200px 300px at left top,transparent 50%,blue 50%);
  37. }    
  38.  
  39. </style>
  40. </head>
  41. <body>
  42.   <div class='raidal4'></div>
  43. <div class='raidal1'></div>
  44. 	<div class='raidal3'></div>
  45. <div class='raidal2'></div>
  46.  
  47. </body>
  48. </html>

　　

最终应用在网站效果：

参考：https://www.jianshu.com/p/631f156e8d11

css边框内凹圆角，解决优惠券的边框问题的更多相关文章

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

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

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

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

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

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

  4. css绘制内扣圆角

    纯静态的一种效果绘制,避免使用图标浪费内存.效果如下 废话不多说,代码如下: <!DOCTYPE html> <html lang="en"> <he ...

  5. [css 揭秘]：CSS揭秘 技巧（四）：边框内圆角

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 边框内圆角 问题:有时候我们需要一个容器,只在内侧有圆角,而 ...

  6. （谷歌浏览器等）解决css中点击input输入框时出现外边框方法【outline:medium;】

    问题:在使用谷歌浏览器,360浏览器时,点击input输入框会出现带颜色的外边框,如下图所示:

  7. CSS 小结笔记之解决flex布局边框对不齐

    在使用flex 进行伸缩布局的时候,经常会给子盒子设置边框,这时经常会出现上下边框对不齐的情况.本篇文章来探讨并解决这个问题. 具体出现的问题如下图所示 具体代码如下 <!DOCTYPE htm ...

  8. HTML&CSS基础-内边框

    HTML&CSS基础-内边框  作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> &l ...

  9. [css 揭秘]：CSS揭秘 技巧（二）：多重边框

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 多重边框 问题:我们通常希望在css代码层面以更灵活的方式来 ...

随机推荐

  1. Python之旅：元组

    作用:存多个值,对比列表来说,元组不可变(是可以当做字典的key的),主要是用来读#定义:与列表类型比,只不过[]换成()age=(11,22,33,44,55)本质age=tuple((11,22, ...

  2. .net 控件开发常见的特性总结

    http://blog.csdn.net/aofengdaxia/article/details/5924364 在.net开发中常常需要使用一些[]里面的特性描述,我发现对常用的几个知道大概的意思, ...

  3. 题解【bzoj1251 序列终结者】

    Description 维护三个操作:区间加,区间翻转,区间求最大值.\(n \leq 50000\) Solution fhqtreap大法好! 模板题(我是不会告诉你这篇题解是用来存个代码的 Co ...

  4. 2018 CTSC&APIO 游记

    CTSC 居然是CTSC先考,弄得我有些意外. 5.6 早上5:30乘坐高铁来到北京,差不多下午了吧,具体几点忘记了,然后来到宾馆   试机也没有去,就直接在宾馆颓废了. 5.7 考试的第一天,6:3 ...

  5. python 中的os模块

    python os模块   Python os 模块提供了一个统一的操作系统接口函数 一.对于系统的操作 1.os.name 当前使用平台 其中 ‘nt’ 是 windows,’posix’ 是lin ...

  6. Java基础-字符串（String）常用方法

    Java基础-字符串(String)常用方法 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.java的API概念 Java的API(API:Application(应用) Pr ...

  7. RabbitMQ基础介绍

    非原创,仅作为个人的学习资料,转自 anzhsoft http://blog.csdn.net/anzhsoft/article/details/19563091, 1. 历史 RabbitMQ是一个 ...

  8. jquery validate 增加过滤特殊字符的方法

    jQuery.validator.addMethod("specialCharFilter", function(value, element) { var pattern = n ...

  9. mysql 主从配置(master/slave)

    1.  在每台服务器上创建复制账号(也可以只在master上创建用户,这里配置两个是为了方便以后切换) 备库运行的I/O县城需要建立一个到主库的TCP/IP连接,所以必须在主库创建一个用户,并赋予合适 ...

  10. 戴尔PowerEdge R430 机架式服务器 安装ubuntu server 14.04.1 LTS 64 位

    硬件配置: 服务编号:5Z04X72 软件配置 1.Ubuntu 系统下载地址: https://certification.ubuntu.com/certification/hardware/201 ...