2020.4.3.第十四天

<!--  

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


-webkit-谷歌、苹果 浏览器前缀

-moz-火狐浏览器前缀

-ms-         IE浏览器前缀

-o-欧鹏浏览器


注:

添加浏览器前缀->兼容模式

不添加浏览器前缀->标准模式

-->

<!--  

渐变?:背景色在多个颜色之间平稳的过渡。

-->

<!--  

线性渐变:

从一个方向到另一个方向的颜色的变化。


标准模式的语法(不添加浏览器前缀):

        background: linear-gradient(direction, color-stop1, color-stop2, ...);

说明:

direction:默认为to bottom,即从上向下的渐变;

stop:颜色的分布位置,默认均匀分布,例如有3个颜色,各个颜色的stop均为33.33%。


兼容模式语法(添加浏览器前缀):

background:linear-gradient( direction, color-stop1, color-stop2,。。。)


说明:direction:  不能添加to    默认指的是 从哪个方向开始

-->

<!--  

渐变方向:

1:to left  \   to right  \ to top

2:对角着渐变

            to left top   \   to  right bottom


3:渐变线角度的变化

例如:标准模式:40deg     40度

兼容模式:90  -  40

-->

<!--  

线性渐变:颜色的分布:

linear-gradient(方向, 颜色1 20%,颜色2 30%,颜色3 )


到20%这个位置仍然是颜色1 出了20% 开始向颜色2渐变

-->

<!--  

径向渐变:

从一个点到四周的颜色的过渡变化。


语法:(必须加浏览器前缀)

     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:最远角。

-->

<!--  

关于径向渐变的大小:

closest-side最近边

farthest-side最远边

closest-corner最近角

farthest-corner最远角

-->

<!--  

重复性渐变:


->重复性线性渐变

            background:repeating-linear-gradient();

->重复性径向渐变

            background:repeating-radial-gradient();

-->

<!--  

过渡:

1. transition-property:检索或设置对象中的参与过渡的属性

2. transition-duration:检索或设置对象过渡的持续时间

3. transition-delay:检索或设置对象延迟过渡的时间

4. transition-timing-function:检索或设置对象中过渡的动画类型

动画的运动类型:

默认的不是匀速,默认的是ease


简写属性:

transition:过渡的属性(all)  过渡的时间  延迟时间  动画的类型(linear 匀速)


注:transition必须通过事件触发!(鼠标滑过)改变css属性的值。

-->

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,767评论 0赞 6
  • CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前,你必须使用图像来实现这...
    溜溜球的嘛阅读 414评论 0赞 0
  • 一、html5新特性 1.增加了一个专门用于绘画的元素canvas 2.增加了用于媒体播放的音频和视频元素 3.增...
    空谷悠阅读 710评论 0赞 2
  • 1. border-radius border-radius请参考文章关于css3的边框的border-radiu...
    苦苦修行阅读 1,323评论 0赞 0
  • 这条河谁也不知道它流了多少岁月了,它是流经我们乡镇最大的一条河,所以我们镇上的人都叫它“大河”。记得很小的时候,我...
    乡下读书人阅读 237评论 4赞 1

友情链接更多精彩内容