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代码层面以更灵活的方式来 ...
随机推荐
- Centos 7安装Python3.6
1> 安装python3.6可能使用的依赖 yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel ...
- 浏览器json数据格式化
在浏览器上作接口测试的时候看到json 格式的数据是密密麻麻的一片,眼睛都花了.. 如: 设置方法: chrome 的右上角选择,然后--- 更多工具--- 扩展程序 ---- JSO ...
- 服务器安全策略之《通过IP安全策略阻止某个IP访问的设置方法》
现在我们在布署好了一个网站,发布到外网后就意味着将会接受来自四面八方的黑客攻击,这个情况很常见,我们的网站基本上每天都要接受成千上万次的攻击,有SQL注入的.有代码注入的.有CC攻击等等...而我作为 ...
- python---Django中模型类中Meta元对象了解
Django中模型类中Meta元对象了解 1.使用python manage.py shell 进入编辑命令行模式,可以直接进入项目(为我们配置好了环境) python manage.py shell ...
- jquery实现行列的单向固定和列的拖拽
其实这些功能在PL/SQL Dev中都有实现,在页面中还是蛮常见的. 我实现列的单向固定的原理:将需要单向固定的列放在一个<table>标签中,而整体的数据放在另一个<table&g ...
- IntelliJ IDEA连接cvs超时Error refreshing view: Timeout while trying to connect to host
在使用IntelliJ IDEA连接cvs的时候,有时会报超时错误: Error refreshing view: Timeout while trying to connect to host: 1 ...
- 20155331 2016-2017-2 《Java程序设计》第5周学习总结
20155331 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 一.Java异常的基础知识 异常是程序中的一些错误,但并不是所有的错误都是异常,并且错误有时 ...
- PHP面向对象__set（赋值方法）
//类Ren里面的变量都是私有的,子类$r里面直接取是取不到的,正常给变量赋值的方法为$r->__set("age",20);,但是可以直接写成$r->age = 20 ...
- 基本控件文档-UISlider属性
CHENYILONG Blog 基本控件文档-UISlider属性 Fullscreen UISlide属性技术博客http://www.cnblogs.com/ChenYilong/ 新浪微 ...
- Oracle 11.2.0.4在线（Online mode）打补丁14084247解决WRH$_ACTIVE_SESSION_HISTORY不会自动切割的问题
安装了Oracle Database Release 11.2.0.4之后,发现WRH$_ACTIVE_SESSION_HISTORY始终不会自动分割删除, 后来才发现需要应用补丁:14084 ...