边框 & 颜色渐变 & 过度 & 2D转换

最新推荐文章于 2025-03-30 13:23:57 发布

原创最新推荐文章于 2025-03-30 13:23:57 发布 · 439 阅读

1 ·

CC 4.0 BY-SA版权

HTML & CSS 专栏收录该内容

14 篇文章

订阅专栏

博客主要介绍了CSS相关知识，包括边框的阴影、图片设置，如边框图片资源显示、裁剪、宽度、平铺和延伸；渐变的线性、对角、角度、径向及重复径向渐变；过渡的属性名称、时间、时间曲线和开始时间；2D转换的偏移、旋转、缩放和扭曲方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

边框

边框阴影 box-shadow : x-offset(右) y-offset(下) blur模糊区域 spread扩展区域 color [inset向内] [,....];
边框图片 border-image
（1）边框图片资源 border-image-source : url()
默认会将图片显示在边框的四个角

（2）边框图片的裁剪 border-image-slice
(0 0 0 0遵循上右下左，不要带单位，切割成九宫格)

（3）边框图片的宽度,默认为边框宽度，border-image-width（一般不写）

（4）边框图片的平铺border-image-repeat
属性值：stretch拉伸（默认） repeat重复 round缩放后的重复

（5）边框图片向外延伸 border-image-outset(不能为负值)

渐变gradient（属性值）

线性渐变

background: linear-gradient(yellow, blue,pink,#58bc58,...);  		  /*默认从上到下渐变*/
background: linear-gradient(to right, yellow, blue,pink,#58bc58,...); /*从左到右渐变*/

标准的语法（必须放在最后）

对角渐变

background: -webkit-linear-gradient(left top, red , blue);   /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue);     /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue);   /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue);

标准的语法（必须放在最后）

角度渐变（新版本旋转方向正值为顺时针，老版本旋转方向正值为逆时针）

background: -webkit-linear-gradient(0deg, red, blue);  /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(0deg, red, blue);       /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(0deg, red, blue);     /* Firefox 3.6 - 15 */
background: linear-gradient(0deg, red, blue);          /* 标准的语法（必须放在最后） */

颜色结点（不均匀分布）

background: linear-gradient(red 50%, blue 70%,yellow);

径向渐变

background: -webkit-radial-gradient(red, green, blue);   /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, green, blue);        /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, green, blue);      /* Firefox 3.6 - 15 */
background: radial-gradient(red, green, blue);           /* 标准的语法 */

颜色（不均匀分布）
…
shape参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

重复的径向渐变
repeating-radial-gradient() 函数用于重复径向渐变

过渡transition

transition-property规定应用过渡的 CSS 属性的名称。
transition-duration定义过渡效果花费的时间。默认是 0。
transition-timing-function规定过渡效果的时间曲线。默认是 “ease”。
transition-delay规定过渡效果何时开始。默认是 0。