CSS3--阴影，渐变，背景图片

时间：2022-05-01 18:27:32

文字阴影
.element{
text-shadow:1px 1px 1px #cccccc;
}
先右再下
第一个值：右侧阴影的大小
第二个值：下方阴影的大小
第三个值：模糊距离（阴影从开始变淡到完全消失的距离）
最后一个值：阴影颜色

阴影值也可以使用em或rem单位
取消文字阴影 text-shadow:none;
浮雕文字效果：不要模糊，不要水平阴影，仅在垂直方向设置1或2像素的“白影”即可

多重文字阴影，只需将两组值使用逗号分隔开即可，如：
text-shadow:0px 1px #ffffff,4px 4px 0px #dad7d7;

盒阴影
-ms-box-shadow:0px 3px 5px #444444;
-moz-box-shadow:0px 3px 5px #444444;
-webkit-box-shadow:0px 3px 5px #444444;
box-shadow:0px 3px 5px #444444;

内阴影
阴影出现在元素内部
box-shadow:inset 0 0 40px #000000;
多出来的inset告诉浏览器设置内阴影效果
可用来制作光晕效果

多重阴影
box-shadow:inset 0 0 30px hsl(0,0%,0%),
inset 0 0 70px hsla(0,97%,53%,1);
即两组值用逗号分开，这样两组阴影就会按照代码中的先后顺序从上到下应用到元素上（代码中先声明的规则，在浏览器中会覆盖下面的规则）
如上代码中，黑色覆盖红色，但两者并存
box-shadow:0px 3px 5px #444444;

线性背景渐变
background:linear-gradient(90deg,#ffffff 0%,#e4e4e4 50%,#ffffff 100%);
第一个值定义了渐变的方向，默认是一个垂直从顶部到底部的渐变。还可以使用如to top right这样的值，会产生一个朝向右上角的对角线渐变
下一个值定义了渐变的起点，包括颜色和位置。起点位置可以使用负值，这样渐变从实际可见区域之外就开始了
下一个值指的是“过渡颜色点”。可以在渐变终点之前定义更多的过渡颜色点（使用逗号分隔）
圆括号中的最后一个值始终是渐变的终点

径向背景渐变
1.background:radial-gradient(center,ellipse cover,#ffffff 72%,#dddddd 100%);
2.background:radial-gradient(25px 25px,ellipse cover,#ffffff 72%,#dddddd 100%);
第一个值，渐变起点
第二个值，渐变形状circle，或者ellipse，后跟随半径
其大小值如下：
closest-side:(渐变形状是圆形时)以距离中心点最近的一边为渐变半径，或者（渐变形状是椭圆时）以距离中心点最近的水平或垂直边为渐变半径
closest-corner:以距离中心点最近的一角为渐变半径
farthest-side:和closest-side相反，(渐变形状是圆形时)以距离中心点最远的一边为渐变半径，或者（渐变形状是椭圆时）以距离中心点最远的水平或垂直边为渐变半径
farthest-corner:以距离中心点最远的一角为渐变半径
cover:和farthest-corner完全一样
contain:和closest-side完全一样
接下来是定义渐变起点、过渡颜色点以及终点

重复渐变
1.background:repeating-linear-gradient(90deg,#ffffff 0px,red 5px);
2.background:repeating-radial-gradient(2px 2px,ellipse,red 2px,blue 10px, yellow 15px,green 20px);
加前缀repeating

背景渐变图案
body{
background-color:white;
background-image:
radial-gradient(hsla(0,0%,87%,0.31) 9px,transparent 10px),
repeating-radial-gradient(hsla(0,0%,87%,0.31) 0,
hsla(0,0%,87%,0.31) 4px,transparent 5px,
transparent 20px,hsla(0,0%,87%,0.31) 21px,
hsla(0,0%,87%,0.31) 25px,transparent 26px,
transparent 50px
);
background-size:30px 30px,90px 90px;
background-position:0 0;
}

border-radius

多重背景图片

制作一个顶部和底部使用不同背景图片的页面

<body class="headerBackgroundHere">

    <div class="footerBackground">

        <div id="container">

            <header>

            </header>

            <div id="main" role="main">

            </div>

            <footer>

            </footer>

        </div>

    </div>

</body>
body{

    background-image:url("1.png");

    background-repeat:repeat-x;

}

.footerBackground{

    background-image:url("2.png");

    background-repeat:repeat-x;

    background-position:bottom;

}

CSS3允许为一个元素设定多重背景
语法如下：
background:url(''),
url(''),
url('');
排在最前的图片在浏览器中显示时会覆盖在最上面，还可以在声明中追加背景颜色，如下：
background:url(''),
url(''),
url('') left bottom,black;
将颜色定义在最后，背景色就会显示在所有背景图片下面

背景图片大小 background-size属性
使用多重背景时，语法如下：
background-size:100% 50%,200px 400px,auto;
按照背景属性中图片的顺序对应排列。
auto：使用图片的原始大小
cover: 按照原始图片的长宽比缩放图片以填充整个元素区域
contain：按照原始图片的长宽比缩放图片以使其较长的一边适应元素大小

背景图片位置
background:url('') center,
url(''),
url('') left bottom,black;
默认是top left

相关文章