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代码层面以更灵活的方式来 ...
随机推荐
- Tensorflow训练神经网络
以下代码摘自<Tensorflow实战Google 深度学习框架>. 由于这段代码包含了激活函数去线性化,多层神经网络,指数衰减学习率,正则化防止过拟合,滑动平均稳定模型等手段,涵盖了神经 ...
- HAOI2018游记
前言 很懒. 太懒了. 不仅懒得写题..连游记都懒得写.. 花点时间填一下坑吧..不过话说我去年的NOI/APIO/CTSC游记也没写.. 省选前 板子好像一早就打完了,没什么可干的. 也不愿意开新题 ...
- Kubernetes PV/PVC使用实践
转载于https://www.cnblogs.com/ericnie/p/7733281.html pv,pvc的概念不解释了,之前在registry中已经使用过PV和PVC,现在想把WebLog ...
- python 获取本机 IP
原文 通过 UDP 获取本机 IP,目前见过最优雅的方法 这个方法是目前见过最优雅获取本机服务器的IP方法了.没有任何的依赖,也没有去猜测机器上的网络设备信息. 而且是利用 UDP 协议来实现的,生成 ...
- 关于ARGB_8888、ALPHA_8、ARGB_4444、RGB_565的理解
关于ARGB_8888.ALPHA_8.ARGB_4444.RGB_565的理解 A:透明度 R:红色 G:绿 B:蓝 Bitmap.Config ARGB_4444:每个像素占四位,即A=4,R=4 ...
- noi题库（noi.openjudge.cn） 3.9数据结构之C++STL T1——T2
T1 1806:词典 描述 你旅游到了一个国外的城市.那里的人们说的外国语言你不能理解.不过幸运的是,你有一本词典可以帮助你. 输入首先输入一个词典,词典中包含不超过100000个词条,每个词条占据一 ...
- nodejs压缩
在express中要用到压缩,把某一个文件夹压缩成zip,再返回到客户端提供下载. 用archiver库 var Archiver = require('archiver') router.get(' ...
- soj1763.传球游戏
题目不算很难,dp的转移方程也很容易列出: 设dp[i][j] 代表第i次传球之后球回到j手中的传球数.易得: dp[i][j] = dp[i-1][j-1] + dp[i-1][j-1] 再处理一下 ...
- 初涉sqlmap
1.基本注入(这个工具kali或者bt下面有集成的,这里附加一个window免py版,提取码:3ldv) sqlmap -u http://url/xx.php?id=1 判断注入 sqlmap - ...
- 【codeforces】【比赛题解】#872 CF Round #440 (Div.2)
链接. [A]寻找漂亮数字 题意: 给定了两列非零数字.我们说一个数是漂亮的,当它的十进制表达中有至少一个数从数列一中取出,至少有一个数从数列二中取出.最小的漂亮数字是多少? 输入: 第一行两个数\( ...