CSS复习

`阴影boxshadow`

你几乎可以在任何元素上使用box-shadow来添加阴影效果。如果元素同时设置了 border-radius属性，那么阴影也会有圆角效果。多个阴影在z轴上的顺序和多个 text shadows 规则相同(第一个阴影在最上面)。

 /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

例子

`渐变`

`linear-gradient` 线性渐变

第一个参数指明了颜色渐变的方向：

可以是角度，比如 0deg，表示正上方向，90deg 表示向右（顺时针）
也可以是关键词，比如 to top, to right, to bottom, to left, 分别对应了 0deg, 90deg, 180deg, 270deg。当然也可以不指定，默认值是 to bottom

第二个参数指明了颜色断点（即 color-stop）：
位置可以省略，第一个默认为 0%，最后一个默认为 100%，如果中间的值没有指定，则按颜色数目求均值，比如

linear-gradient(red 40%, white, black, blue)
/*等价于*/
linear-gradient(red 40%, white 60%, black 80%, blue 100%)

使用渐变函数画出的锐变彩虹

使用渐变产生图片上半透明遮罩的效果

.gradient-2 {background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)),  url()  no-repeat;
}

`radial-gradient`径向渐变

其实就是颜色从一个点以同心圆或者椭圆向外渐变

position         用来指定渐变圆心的位置，默认为 center，赋值规则与 background-positon 的类似；
ending-shape    可以是 circle 或者 elipse，如果省略，则默认值与 size 相关，size 指定一个值就是圆形，否则是椭圆；
size            可以是具体的值，也可以用关键字指定，默认值是 farthest-corner。如果是具体值，圆形需要一个数值，椭圆需要两个。
关键字则包括：closest-side  指 gradient box 某一边到盒子中心最近的距离；
farthest-side   指 gradient box 某一边到盒子中心最远的距离；
closest-corner  指 gradient box 某一顶点到盒子中心最近的距离；
farthest-corner 指 gradient box 某一顶点到盒子中心最远的距离；
color-stop-list 与 linear-gradient 类似

注意：

size 的数值不能是负数
W3C 规范规定，百分比的数值只能用于椭圆，不能用于圆形。
position 的值可以是负数

下面的几种方法是等价的

.gradient-1 {background-image: radial-gradient(yellow, green);
}.gradient-2 {background-image: radial-gradient(ellipse at center, yellow 0%, green 100%);
}.gradient-3 {background-image: radial-gradient(farthest-corner at 50% 50%, yellow, green);
}.gradient-4 {background-image: radial-gradient(ellipse farthest-corner at 50% 50%, yellow, green);
}

`动画`

https://www.runoob.com/css3/css3-animations.html

CSS（boxshadow+渐变+动画）相关推荐

纯CSS边框渐变动画
一:CSS与图片参考 <style> html,body,.box { height:100%; display:flex; align-items:center; justify-con ...
CSS 实现卡片边框渐变动画
1.实现效果 2.实现步骤父容器添加背景渐变色 <div class="card"></div> .card {background: linear-gr ...
[css] 为什么说对opacity进行动画要比box-shadow进行动画性能更好呢？
[css] 为什么说对opacity进行动画要比box-shadow进行动画性能更好呢? opacity的动画过程既不会影响布局,也不需要重绘个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很 ...
谈谈一些有趣的CSS题目（十三）-- 巧妙地制作背景色渐变动画！
谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画! 原文:谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画! 开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到 ...
css背景渐变（动画）
css背景渐变(动画) // css背景渐变(动画).writeFarming{background: linear-gradient(-45deg, #2d8cf0, #19be6b, #ff990 ...
纯css实现背景颜色渐变动画
纯css实现背景颜色渐变动画,代码及效果图如下. body {width: 100wh;height: 100vh;color: #fff;background: linear-gradient(-4 ...
css 文字颜色渐变 animation,css3文字渐变动画
这次给大家带来css3文字渐变动画,实现css3文字渐变动画的注意事项有哪些,下面就是实战案例,一起来看一下. 利用css3这个属性(背景剪裁): background-clip: border-bo ...
如何用css实现波纹动画效果
波纹效果可以用css的 animation 动画来实现,animation 相比单纯用 transform 能实现更为复杂的效果. 效果图: 下面三张图分别为原图.效果图和去掉背景图片后的效果图, ...
悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果
CSS3 transition属性实现hover渐变动画效果我们知道许多网页动态特效都是由FLASH或JQUERY之类的JS特效库实现的实际上现在CSS3也能实现很多类似效果了,只是在各种浏览器中兼 ...

CSS（boxshadow+渐变+动画）

CSS复习

`阴影boxshadow`

`渐变`

`linear-gradient` 线性渐变

`radial-gradient`径向渐变

`动画`

CSS（boxshadow+渐变+动画）相关推荐

最新文章

热门文章

CSS（boxshadow+渐变+动画）

CSS复习

阴影boxshadow

渐变

linear-gradient 线性渐变

radial-gradient径向渐变

动画

CSS（boxshadow+渐变+动画）相关推荐

最新文章

热门文章

`阴影boxshadow`

`渐变`

`linear-gradient` 线性渐变

`radial-gradient`径向渐变

`动画`