css-渐变、过渡

最新推荐文章于 2024-09-23 02:01:58 发布

Jared864

最新推荐文章于 2024-09-23 02:01:58 发布

阅读量328

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/Jared864/article/details/105301202

版权

Day19
1、浏览器css3属性前缀
很多css3属性，最初的预览版没有形成最终的正式版，但是浏览器为了对这些新属性形成支持，主流浏览器都提供了属于自己的语法规则“浏览器前缀“。

	-webkit-    谷歌、苹果 浏览器前缀
	-moz-      火狐浏览器前缀
	-ms-        IE浏览器前缀
	-o-         欧鹏浏览器前缀

	注：
		添加浏览器前缀    -> 兼容模式
		不添加浏览器前缀  -> 标准模式

2、线性渐变
渐变：背景色在多个颜色之间平稳的过渡。

线性渐变：从一个方向到另一个方向的颜色的变化。

标准模式的语法(不添加浏览器前缀)：
Background:linear-gradient(direction, color-stop1, color-stop2,…)
说明：
Direction:默认为to bottom，从上到下渐变0；
Stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.3%。

兼容模式语法（添加浏览器前缀）：
Background:linear-gradient(direction, color-stop1, color-stop2,…)
说明：direction：不能添加to，默认指的是从哪个方向开始。

渐变方向：

To left \ to right \ to top
对角线角度的变化
例如：to left top 左上角 \ to right bottom 右下角
渐变线角度的变化
例如：标准模式：40deg 40度（顺时针）
兼容模式：90 -40=50deg 等同于标准模式下的40deg

线性渐变颜色的分布：
Linear-gradient(方向，颜色1 20%，颜色2 30%，颜色3)
到20%这个位置仍然是颜色1，过20%开始想颜色2渐变。

3、径向渐变：
径向渐变：从一个点到四周的颜色的过度变化。

语法：（必须加浏览器前缀）
Background: radial-gradient (center, shape, size, start-color, …, last color)
说明：
center：渐变起点的位置，可以为百分比，默认是图形的正中心。
Shape：渐变的形状，ellipse表示椭圆，circle表示圆形。默认为ellipse，如果元素为正方形的元素，则ellipse和circle显示一样为圆形。
Size:渐变的大小。即渐变到哪里停止，四个值：closest-side 最近的边；farthest-side 最远的边； closest-corner最近角；farthest-corner最远角。

4、重复性渐变

重复性线性渐变：
Background:repeating-linear-gradient();
Background:repeating-radial-gradient();

5、过渡
过渡：transition
四个属性：