实现线性渐变,你至少需要定义两种颜色的结点,这两种结点就是你想平稳过渡的颜色,即:其中一种颜色结点为起点,另一种颜色结点为结束点
同时也可以定义渐变的方向,是从上到下渐变,还是从左至右渐变,或者从右至左渐变,默认情况下是从上至下渐变的
当然也可以对角渐变,如:从左上角到右下角
创建重复的线性渐变
to left:设置渐变为从右到左。相当于: 270deg
to right:设置渐变从左到右。相当于: 90deg
to top:设置渐变从下到上。相当于: 0deg
to bottom:设置渐变从上到下。相当于: 180deg (这是默认值,等同于留空不写)
如果还想更多地控制渐变方向,可以改变渐变的角度
也可以在渐变中使用透明度, 所以我们得使用 rgba() 函数来定义颜色结点。 rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明
径向渐变是由中心向外渐变的。可以定义它中心 (默认渐变是中心是 center ) 、形状(圆形或椭圆形)、大小等
其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse
给文字 color 添加渐变效果的话, 可以这样写:
CSS3高级属性可分为:选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面。CSS边框和圆角transform:可以旋转、缩放、倾斜、平移的元素;border-radius:圆角;单独分离:border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius左上角,右上角,右下角,左下角。第一个值:左上角, 第二个值:右上角、左下角,第三个值:右下角第一个值:左上角、右下角,第二个值:右上角、左下角四个圆角值相同box-shadow:阴影;投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色border-image:边框图片; background-image:多个图片路径;background-size:设置图片大小background-position:为多个图片路径设定位置;background-repeat:为多个路径设置图片显示是否重复;background-origin:指定图像的区域 background-clip:指定位置开始绘制。 注意:背景颜色只能设置一个background:图片路径 显示位置 是否重复,图片路径 显示位置 是否重复·········· CSS渐变色css有两种类型的渐变:线性渐变和径向渐变线性渐变:创建一个线性渐变,至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)background:linear-gradient(颜色···········) 默认从上到下·background:linear-gradient(to right,颜色···········) 从左到右·background:linear-gradient(to left,颜色···········) 从右到左·background:linear-gradient(to top left ,颜色···········) 从右下到左上·也可以按照角度来渐变background: linear-gradient(0deg, red, blue)重复的线性渐变:background: repeating-linear-gradient(red, yellow 10%, green 20%)径向渐变:至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,也可以指定渐变的中心、形状、大小。默认渐变的中心是 center,渐变的形状是 ellipse(椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。background: radial-gradient(位置,[形状], 颜色 【百分比】··················)CSS文本效果 文本属性:text-shadow:偏移量 向下大小 模糊度 颜色box-shadow:使用于盒子阴影word-wrap:break-word换行word-break:单词拆分换行属性指定换行white-space:处理元素中的空白