CSS | 渐变的妙不可言 linear & radial
来源:互联网 发布:c语言计算闰年循环 编辑:程序博客网 时间:2024/04/29 02:58
“你以为你这么低调我就找不到你了吗?没有用的,像你这样拉风的属性,只要有你在的地方,就好像黑夜中的萤火虫一样,那样的鲜明,那样的出众;你那委婉的形状,奇特的写法,神乎其技的思路,还有那百转千回……都深深地迷住了我。”
——题记,改自《国产凌凌漆》
正文
最近发现css3渐变无敌,边边角角利用linear-gradient
或者radial-gradient
也可以实现,如下图,包括之前所讲的 CSS3 | 制作文字波浪线效果 一文也有谈到:
1. linear-gradient
语法
<side-or-corner>
描述渐变线的起始点位置。它包含两个关键词:第一个指出垂直位置left or right,第二个指出水平位置top or bottom。关键词的先后顺序无影响,且都是可选的。to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。<angle>
用角度值指定渐变的方向(或角度)。 See <angle>.<color-stop>
由一个 <color>值组成,并且跟随着一个可选的终点位置(可以是一个百分比值或者是沿着渐变轴的<length>)。
比如说linear-gradient( 45deg, blue, red )
,效果如下,具体用法可以看下 MDN 或者W3C。
再来看background: linear-gradient(135deg, transparent 50%, red );
如此一来,那实现刚开始的第一张效果图,可有想法?
我们继续看background: linear-gradient(135deg, transparent 15px, red 0)
:
而background是允许有多背景的,结合background-size
(避免渐变图案覆盖), background-repeat
(避免渐变图案平铺),利用background-position
设置图片位置,最终第一张效果图实现代码:
.bevel { width: 10rem; height: 10rem; margin: 30px auto; background: #58a; background: linear-gradient(135deg, transparent 15px, #6cc 0) top left, linear-gradient(-135deg, transparent 15px, #6cc 0) top right,linear-gradient(-45deg, transparent 15px, #6cc 0) bottom right, linear-gradient(45deg, transparent 15px, #6cc 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat;}
2. radial-gradient
语法
// 定义结束的形状
radial-gradient( circle, … ) /* Synonym of radial-gradient( circle farthest-corner, … ) */
radial-gradient( ellipse, … ) /* Synonym of radial-gradient( ellipse farthest-corner, … ) */
radial-gradient( <extent-keyword>, … ) /* It draws a circle */
radial-gradient( circle radius, … ) /* A centered circle of the given length. It can't be a percentage */
radial-gradient( ellipse x-axis y-axis, … ) /* The two semi-major axes are given, horizontal, then vertical */
// 定义形状的位置
radial-gradient ( … at <position>, … )// Definition of the color stops
radial-gradient ( …, <color-stop>, … )
radial-gradient ( …, <color-stop>, <color-stop> )
了解了radial-gradient的语法后,实质上实现边角的道理跟linear-gradient是一样样的。
具体就不说了,直接看第二张图效果的代码,如下:
.concave { width: 10rem; height: 10rem; margin: 30px auto; background: #58a; background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left, radial-gradient(circle at top right, transparent 15px, #58a 0) top right, radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right, radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat;}
了解了这个奇特的用法,你是不是可以创造出更多有意思的形状呢~
暂此,敬请交流~
参考文章
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-image
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds
- CSS | 渐变的妙不可言 linear & radial
- 渐变 linear 和 radial
- 线性渐变linear-gradient,放射性渐变radial-gradient,循环渐变
- css渐变之radial-gradient
- CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)
- CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)
- CSS3线性渐变 径向渐变 background linear-gradient radial-gradient
- CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)。
- CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)
- css渐变之linear-gradient
- CSS中背景的Linear Gradients(线性渐变)
- linear-gradient和radial-gradient属性——css3渐变效果
- css渐变 -moz-linear-gradient -webkit-gradient
- 深入理解CSS线性渐变linear-gradient
- radial-gradient CSS3的蛋疼的径向渐变
- radial-gradient CSS3的蛋疼的径向渐变
- CSS3 两种类型的渐变(lineat Gradients线性渐变和Radial Gradients径向渐变)
- CSS线性渐变 垂直和水平渐变linear-gradient
- ES权威指南_01_get start_07 Full-Body Search
- Hibernate中类级别和关联级别加载策略
- Initializing Spring root WebApplicationContext
- 艳辉网V1.0之VOD点播系统
- JavaWeb,Struts2框架入门,MyEclipse下环境配置,404错误解决
- CSS | 渐变的妙不可言 linear & radial
- ES权威指南_01_get start_08 Sorting and Relevance
- 启动项目出现:java.lang.NoClassDefFoundError: org/springframework/asm/ClassVisitor
- qq个人中心g_tk算法
- 出现 adobe flash player插件过期 解决方案
- Python expected an indented block
- ES权威指南_01_get start_09 Distributed Search Execution
- 职工信息管理系统
- ionic2 修改返回键颜色文字