html背景渐变阴影方向,css3-阴影、背景尺寸、渐变

css3.png

一、文字阴影

text-shadow: X轴偏移量  Y轴偏移量  阴影模糊半径 阴影颜色html>

#box{                height: 200px;                margin: 200px auto;                text-align: center;                font-size: 50px;                font-weight: bold;                /*text-shadow: X轴偏移量  Y轴偏移量  阴影模糊半径 */

text-shadow: 5px 5px 5px blue;

}        

今天天气真好！        

阴影01.jpg

可以设置多个阴影，参数之间用逗号分隔

html>

#box{                height: 200px;                margin: 200px auto;                text-align: center;                font-size: 50px;                font-weight: bold;                text-shadow: 5px 5px 5px blue,20px 20px 6px red;

}        

今天天气真好！        

阴影02.jpg

二、盒子阴影

box-shadow: X轴偏移量  Y轴偏移量  阴影模糊半径 阴影颜色html>

#box{                height: 200px;                width: 200px;                background-color: pink;                margin: 200px auto;                box-shadow: 10px 10px 10px red;

}        

阴影03.jpg

可以设置多个阴影，参数之间用逗号分隔

html>

#box{                height: 200px;                width: 200px;                background-color: pink;                margin: 200px auto;                box-shadow: 10px 10px 10px red,20px 20px 10px blue;

}        

阴影04.jpg

三、图片背景

background-size

参数不同，效果不一

background-size: 600px 600px

**设置固定大小的图片背景 **

01.jpg

**

background-size: cover

等比例缩放图片到完全覆盖容器，背景图像有可能超出容器(此时背景全部被覆盖，但是背景图片的长或款可能会溢出容器)

**

02.jpg

background-size: contain;

完全包含图片，一端完全撑开，另一端等比例缩放

03.jpg

background-size: auto

背景图片真实大小

04.jpg

小知识：

background-position: center center；

保证图片拉伸后，视觉中心在最中间

四、线性渐变(IE9及IE9以下不支持)

为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。

background:linear-gradient(角度, 颜色1, 颜色2, 颜色3)

根据角度 创建线性渐变

background: linear-gradient(60deg,red,yellow,green);

渐变1.jpg

background:linear-gradient(to 方向, 颜色1, 颜色2, 颜色3)

根据方向(可以设置两个方向,中间用空格隔开) 创建线性渐变

background: linear-gradient(to left,red,yellow,green);

渐变2.jpg

五、径向渐变(IE9及IE9以下不支持)

为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状(原型或椭圆形)、大小。默认情况下，渐变的中心是 center(表示在中心点)，渐变的形状是 ellipse(表示椭圆形)，渐变的大小是 farthest-corner(表示到最远的角落)

background: radial-gradient(颜色1,颜色2，等等，);

颜色结点均匀分布,注意可设置多个颜色

background:radial-gradient(pink, purple)

渐变.jpg

background: radial-gradient(颜色1 大小 ，颜色2  大小);

设置大小的的渐变

background: radial-gradient(pink 20px,purple 40px);

渐变 (2).jpg

background: radial-gradient(at 方向,颜色1，颜色2);

可以控制方向

background: radial-gradient(at left,pink,purple);

渐变 (3).jpg

background: repeating-radial-gradient( );

重复径向渐变

background: repeating-radial-gradient(pink,purple 50px);

渐变 (4).jpg

作者：范小饭_

链接：https://www.jianshu.com/p/a1b927dfcc23