css3 shadow阴影

来源：互联网发布：top100高频算法编辑：程序博客网时间：2024/06/17 10:11

阴影部分
Shadow（阴影）
text-shadow是给文本添加阴影效果，使用 text-shadow 属性给页面上的文字添加阴影效果，text-shadow 属性是在CSS2中定义的，在 CSS2.1 中删除了，在 CSS3 的 text 模块中又恢复了。
text-shadow:5px 2px 2px rgba(64, 64, 64, 0.5),
后面的参数分别是水平偏移量，垂直偏移量上为负数，阴影模糊半径（此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊），后面的RGBA都知道了是颜色和透明度。
text-shadow:5px 2px 2px rgba(-64, -64, 64, 0.5),
水平X，竖直Y，前两个参数都可以为负值，即反方向，和定位的left，top类似
也可以设置另外三个边的阴影
.bg2{
            width: 100px;
            height: 50px;
            background-color: blanchedalmond;
            box-shadow:-10px 0 10px red, /左边阴影/
            10px 0 10px yellow, /右边阴影/
            0 -10px 10px blue, /顶部阴影/
            0 10px 10px green; /底边阴影/
            margin-left:45%; 为了观看的更直白，并没什么用
        }
这时可以叫同学做一个以前非主流的文字图片。（动画和阴影结合）
<style>
    .transform{
        width:400px;
        height:100px;
        font-size: 35px;
        font-family: 楷体;
        color: #666666;
        animation:BiaoShiFu 0.2s infinite alternate;/动画捆绑，两个值，动画名称、时长，加上一个无限执行，交替执行/
    }
    @keyframes BiaoShiFu
    {/改变位置和背景颜色/
        0% {text-shadow:0 5px 1px gray;}
        75% {text-shadow:0 5px 1px yellow;}
        100% {text-shadow:0 5px 1px red;}
    }
</style>
<body>
<div class="transform">
    说好
    <br>
    如果
</div>

2、box-shadow是给元素块添加周边阴影效果。
怎么用  对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色}
.bg2{
            width: 100px;
            height: 50px;
            background-color: blanchedalmond;
            box-shadow:-10px 0 10px red, /左边阴影/
            10px 0 10px yellow, /右边阴影/
            0 -10px 10px blue, /顶部阴影/
            0 10px 10px green; /底边阴影/
            margin-left:45%;
        }
唯一不同的就是可以在X前面加一个inset，表示内阴影，就是阴影往元素快内显示。
在text-shadow中inset不可用，试试。

5 CSS3倒影（反射）
-webkit-box-reflect
reflect：反射
1）、用法：根据浏览器的兼容性，使用box-reflect时需要添加-webkit和前缀。
-webkit-box-reflect: right 10px /方向和距离/
2）、参数：
文字倒影：
.reflect{
      width:950px;
      margin:0 auto;
      font-size: 80px;
      font-weight: bold;
      text-align: center;
    -webkit-box-reflect:below 0px
    -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));

  }
第一个参数：none：没有倒影方向上下左右（above、below、left、right）；
第二个参数：距离。和要倒影的东西的距离。可以为负值。
3）、其它属性、例如颜色透明度变化。

width: 100px;
height: 50px;
-webkit-box-reflect: right 10px /方向和距离/
-webkit-gradient(linear, right top, right bottom, from(transparent),/transparent/
to(rgba(255, 255, 255, 0.5)));
Gradient：变化率、变化曲线(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值) ); -webkit-gradient是background的一个属性值；
第一组参数type（类型）为 linear；
第二组参数是,x1 y1, x2 y2,当成颜色渐变体的两个点
的坐标
6 CSS3渐变
渐变为CSS3的新增属性，分为两种：线性渐变，径向渐变。
1、线性渐变：
Gradient：变化率，梯度变化曲线
1）、-webkit-gradient（原始方法，参数多难写，但是参数多容易调整，就是老师说的拖拉机）
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
参数分别代表：linear：线性后面两对百分数代表起始位置和终止位置。from（起始的颜色） to(渐变后的色)，既from里的颜色向to里面的色过渡。
可以用这个做数值渐变，调整参数。
2）、linear-gradient（小轿车）竖直渐变。
   background: linear-gradient(red, blue); /* 标准的语法 /
参数只有起始颜色和终止颜色。
background: linear-gradient(red, blue,yellow);
也可以多个颜色。
background: linear-gradient(red 50%, blue); / 标准的语法 /
颜色后面加个百分数可以控制在哪个地方开始渐变
3）、水平渐变（方向为水平）
background: -webkit- linear-gradient(left ，red，yellow)
参数三个，分别是方向、起始颜色和终止颜色。
4）、已角度为方向渐变
方向也可以是角度
background: -webkit -linear-gradient(15deg, red, blue);

2、径向渐变：
CSS3径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化，而是从一个起点朝所有方向混合。但相对线性渐变要比径向渐变复杂的多。
语法：
radial-gradient
radial:径向的; 辐射状的; 放射式的。
background: radial-gradient(red, green, blue); / 标准的语法 */
不均匀渐变
  background: radial-gradient(red 5%, green 45%, blue 5%);
形状变化（还有椭圆形ellipse）
background: radial-gradient(circle, red, yellow, green);
实验椭圆的时候记得长和宽不要设置一样
重复变化
background: repeating-radial-gradient(red, yellow 10%, green 15%);

阅读全文

0 0