css边框内凹圆角，解决优惠券的边框问题
关于css边框内凹圆角，找了好久才找到的
<html
<head>
<title>无标题页</title>
<style>
body{
background:#999
}
.raidal1 {
height: 100px;
width: 100px;
background:radial-gradient(200px at left top,transparent 50%,#fff 50%);
} /* 右上 */
.raidal2 {
height: 100px;
width: 100px;
background:radial-gradient(200px at right top,transparent 50%,#fff 50%);
} /* 右下 */
.raidal3 {
height: 100px;
width: 100px;
background:radial-gradient(200px at right bottom,transparent 50%,#fff 50%);
} .raidal4 {
height: 100px;
width: 100px;
background:radial-gradient(200px at left bottom,transparent 50%,#fff 50%);
}
.ellipse {
height: 100px;
width: 100px;
background:radial-gradient(200px 300px at left top,transparent 50%,blue 50%);
} </style>
</head>
<body>
<div class='raidal4'></div>
<div class='raidal1'></div>
<div class='raidal3'></div>
<div class='raidal2'></div> </body>
</html>
最终应用在网站效果：
参考：https://www.jianshu.com/p/631f156e8d11
css边框内凹圆角，解决优惠券的边框问题的更多相关文章
- CSS实现多重边框和内凹圆角
CSS实现多重边框 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...
- CSS布局技巧 -- 内凹圆角
圆角,相信每一个了解CSS属性的都知道,通过border-radius实现圆角(外凸圆角),但是如果需要实现内凹圆角怎么办呢?比如四角内凹的元素,比如如下所示这样的内凹圆角 对于这种问题,很多人的反应 ...
- CSS-论css如何纯代码实现内凹圆角
background-image: radial-gradient(200px at 50px 0px, #fff 50px, #4169E1 50px); 这是做内凹圆角的核心代码,就是背景图的ra ...
- css绘制内扣圆角
纯静态的一种效果绘制,避免使用图标浪费内存.效果如下 废话不多说,代码如下: <!DOCTYPE html> <html lang="en"> <he ...
- [css 揭秘]：CSS揭秘 技巧（四）：边框内圆角
我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 边框内圆角 问题:有时候我们需要一个容器,只在内侧有圆角,而 ...
- （谷歌浏览器等）解决css中点击input输入框时出现外边框方法【outline:medium;】
问题:在使用谷歌浏览器,360浏览器时,点击input输入框会出现带颜色的外边框,如下图所示:
- CSS 小结笔记之解决flex布局边框对不齐
在使用flex 进行伸缩布局的时候,经常会给子盒子设置边框,这时经常会出现上下边框对不齐的情况.本篇文章来探讨并解决这个问题. 具体出现的问题如下图所示 具体代码如下 <!DOCTYPE htm ...
- HTML&CSS基础-内边框
HTML&CSS基础-内边框 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> &l ...
- [css 揭秘]：CSS揭秘 技巧（二）：多重边框
我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 多重边框 问题:我们通常希望在css代码层面以更灵活的方式来 ...
随机推荐
- 关于表单中Readonly和Disabled
Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: Readonly只针对input(text / pass ...
- postgresql 数据库无法启动
在数据库无法启动时,一般可以根据报错信息,采取对应措施即可,下面列出一些在数据库启动时报出错误比较严重而解决方式又不那么明显的处理方法. 模拟错误,查到pg_class系统表中一个索引在磁盘中的位置, ...
- OpenCV入门指南----人脸检测
本篇介绍图像处理与模式识别中最热门的一个领域——人脸检测(人脸识别).人脸检测可以说是学术界的宠儿,在不少EI,SCI高级别论文都能看到它的身影.甚至很多高校学生的毕业设计都会涉及到人脸检测.当然人脸 ...
- python net-snmp使用
安装 官网:http://www.net-snmp.org/download.html 环境:CentOS 6.6 + python 2.7.10 1.下载安装包 net-snmp-5.6.2.1.t ...
- IOS取消performSelector警告
#pragma clang diagnostic push #pragma clang diagnostic ignored "-Warc-performSelector-leaks&quo ...
- 【c#】腾讯人脸识别api签名
using System; using System.Collections.Generic; using System.Linq; using System.Net.Http; using Syst ...
- javascript精雕细琢（四）：认亲大戏——通过console.log彻底搞清this
目录 引言 代码在前 1.function下的this 2.箭头函数下的this 结语 引言 JS中的this指向一直是个老生常谈,但是新手又容易晕的地方.我在网上浏览了很多帖子,但是发 ...
- SCOI2012喵星球上的点名
http://codevs.cn/problem/2403/ 2012年省队选拔赛四川 时间限制: 2 s 空间限制: 128000 KB 题目描述 Description a180285幸运 ...
- Spyder docstrings文档字符串的标准
Spyder docstrings文档字符串的规范 python的docstring 非常重要. 有时候编写一个小函数只需要几行代码就可了. 但是完善的文档很可能比源代码长许多. 特点和标准 docs ...
- Python入门系列教程（六）面向对象
1.self 所谓的self,可以理解为自己,可以把它当做C++中类里面的this指针一样理解,就是对象自身的意思,在用某个对象调用该方法时,就将该对象作为第一个参数传递给self. 2.class ...