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代码层面以更灵活的方式来 ...
随机推荐
- Jenkins(二)---jenkins之Git+maven+jdk+tomcat
git+maven+jdk+tomcat 这四个软件可以百度在linux下的安装,不再赘述. server A ---> jenkins主机ip:192.168.100.119 serve ...
- MVC中HTML控件设为只读readonly
http://www.th7.cn/web/html-css/201501/78934.shtml 1.下拉框设为只读试了试用这个有效: @Html.DropDownListFor(model =&g ...
- codeforces div1 & div2 参与人员分数统计
Analysis helps to see the nature of things.
- ElasticStack系列之十三 & 联想补全策略
业务需求 1. 实现搜索引擎前缀搜索功能(中文,拼音前缀查询及简拼前缀查询功能) 2. 实现摘要全文检索功能,及标题加权处理功能(按照标题权值高内容权值相对低的权值分配规则,按照索引的相关性进行排序, ...
- 题解 P2486 【[SDOI2011]染色】
写在前面 对于刚学树剖的同学比如我这种大大大蒟蒻来说,做这题会给你带来很大的提升:不仅可以对树剖有更深刻的理解,还可以更好的理解线段树,所以这是一道好题哦 为了更好懂,我一点一点说说思路吧 思路 首先 ...
- Casting a Classifier into a Fully Convolutional Network将带全连接的网络做成全卷积网络
详见:http://nbviewer.jupyter.org/github/BVLC/caffe/blob/master/examples/net_surgery.ipynb 假设使用标准的caffe ...
- Java基础-集合的嵌套
Java基础-集合的嵌套 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.静态导入 静态导入是在JDK1.5后的新特性,可以减少开发的代码量,但是实际用处是很一般,静态导入的标准 ...
- isscroll插件 实现下拉加载 上啦刷新 转
http://www.jb51.net/article/98394.htm 下面是别人的代码 <!DOCTYPE html> <html> <head> <m ...
- 3.Filter和interceptor的区别
https://blog.csdn.net/qq_36411874/article/details/53996873
- Android 利用广播接收器启动服务
public class MainActivity extends Activity { private Button bt ; protected void onCreate(Bundle save ...