CSS3-阴影、倒影、渐变学习笔记

来源：互联网发布：mac怎么联网恢复系统编辑：程序博客网时间：2024/06/05 17:10

CSS3阴影

shadow():阴影

1、 text-shadow ：文本阴影

text-shadow: 1px 2px3px

2、

参数：1）X轴的偏移量，越大越向右。

2）Y轴的偏移量，以上为负、下为证。

3）阴影半径（只能时候正值，越大阴影越模糊）。

4）代表颜色

text-shadow: 1px 2px3px,
2px 3px3px red,
2px 3px3px green,
2px 3px3px pink;

分别是四周的阴影（注意：设置的时候是以逗号分隔开）

.transform{
            width: 300px;
            height: 100px;
            font-size: 30px;
            color: #666666;
            animation: active 0.2sinfinite alternate;
        }
     @keyframes active {
         0%{text-shadow: 0 5px 1px red}
         50%{text-shadow: 0 5px 1pxyellow}
         100%{text-shadow: 0 5px 1pxblue}
     }
    </style>
</head>
<body>
<div class="transform">
    <p class="p1">爱我你怕了吗</p>
</div>

动画和文字阴影的结合

2、 box-shadow：是给元素块添加阴影。

参数：1.投影方式（可写可不写）2.X轴的偏移量 3.Y轴的偏移量4.阴影的半径 5.阴影的颜色

box-shadow: 2px3px 2pxred;

加上inset就是阴影往元素块内显示。

CSS3倒影（反射）

Reflect：反射

1、用法：根据浏览器的兼容性的问题，使用box-reflect前需要在前面加上-webkit的前缀。

-webkit-box-reflect:below10px;

2、参数：1）反射的方向（above、below、left、right）上下左右。

2）倒影和本体的距离，可以为负数。

3、其他属性，透明度变化

-webkit-box-reflect:below -10px
-webkit-linear-gradient(transparent,transparent 50%, rgba(255,255,255,0.3 ));

Gradient：变化率，变化曲线

CSS3渐变

渐变为css3新增的属性，分为两种：线性渐变和径向渐变

1、线性渐变：

1）-webkit-gradient{参数多，但是容易调整}

background:-webkit-gradient(linear,0% 0%,100% 0%,from(yellow), to(red) )

参数：linear：线性，后面的两组参数代表的是起始位置和终止位置，from（起始的颜色）to（渐变到哪种颜色）。

2）linear-gradient

background:linear-gradient(yellow,red)

参数只有起始颜色和终止颜色。方向从上往下

background:linear-gradient(green,yellow,red)

也可以多种颜色

background:linear-gradient(green50% ,red)

在颜色后面加上百分数可以控制颜色开始渐变的位置。

2、水平渐变（方向为水平方向）

background:-webkit-linear-gradient(left,red,yellow)

参数为方向、起始颜色。终止颜色。

3、以角度为方向进行渐变

background:-webkit-linear-gradient(45deg,green,red)

参数为角度，起始颜色，终止颜色

径向渐变：

Css3径向渐变就是圆形或者椭圆形渐变，不沿着一条线进行变化，而是从一个起点朝着所有的方向渐变，相比于线性渐变，径向渐变要复杂。

1. 标准语法

background:-webkit-radial-gradient(red,green); //

2.不均匀变化

background:-webkit-radial-gradient(red 30%,green 80%);

参数：在颜色的后面加上百分数可以控制渐变程度

4.形状变化

background:repeating-radial-gradient(red 4%,yellow 30% );

参数：变化的形状、起始的颜色变化、终止颜色。

阅读全文

0 0