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

原创 2017年09月13日 19:50:33


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:below 10px;

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% );

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

生成带有透明渐变倒影的图片

//生成带有倒影的图片 public void createReflectedBitmap() { private int[]  imageIds = new int[]{ R.drawable...
  • chuyouyinghe
  • chuyouyinghe
  • 2015年09月15日 15:01
  • 500

浅谈CSS3新特性——文字阴影text-shadow、阴影box-shadow和倒影box-reflect

利用border属性: 以下三角为例,把左、右、下边框设置为toumse #triangle { width: 0; height: 0; border-...
  • zhouziyu2011
  • zhouziyu2011
  • 2017年03月01日 12:00
  • 645

css3-边框圆角阴影渐变

css3坚持渐进增强原则。相对的是优雅降级原则 css3中新增特性包括很多,如选择器,盒模型,背景和边框,文字特效,2D/3D转换,动画,多列布局。圆角 border...
  • weixin_40014283
  • weixin_40014283
  • 2017年12月01日 21:23
  • 110

2016.3.16__CSS3渐变_倒影_过渡_2D变形_3D变形__第十天

CSS3高级属性今日课程预览 1. 渐变1.1 线性渐变为了创建一个线性渐变,你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)。语法...
  • MR_LP
  • MR_LP
  • 2016年03月16日 22:06
  • 1610

flash特效原理:倒影效果

flash特效原理:倒影效果
  • hero82748274
  • hero82748274
  • 2010年12月16日 16:14
  • 6889

wpf textbox中输入文本下面呈现倒影效果

呈现效果如下图所示 实现源码如下:         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         x:Class="...
  • soft_123456
  • soft_123456
  • 2016年11月07日 10:40
  • 456

opencv 实现图像倒影(渐变)效果【源码】

opencv 实现图像倒影(渐变)效果【源码】
  • panda1234lee
  • panda1234lee
  • 2014年01月06日 17:33
  • 1779

css3渐变和阴影

-webkit-gradient(, , , from(颜色1) ,to(颜色2)) 渐变类型type:linear(线性渐变)或者radial(径向渐变) 渐变起点;x1,y1(可以用left,t...
  • gao_xu_520
  • gao_xu_520
  • 2017年04月26日 10:55
  • 1005

自定义控件(阴影,渐变)

一、阴影: Paint 类定义了一个名为 setShadowLayer 的方法: public void setShadowLayer(float radius,float dx,float dy,...
  • fuzhongbin
  • fuzhongbin
  • 2016年05月05日 11:42
  • 2627

css3文字渐变和阴影、图片边框和边框阴影

文字渐变效果使用background-image+ background-clip + text-fill-color来实现,具体介绍请看点击打开链接 文字阴影使用text-shadow来实现,...
  • dw1067061570
  • dw1067061570
  • 2017年02月08日 17:10
  • 1554
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3-阴影、倒影、渐变学习笔记
举报原因:
原因补充:

(最多只允许输入30个字)