CSS:背景、阴影 |
您所在的位置:网站首页 › cssdiv阴影效果 › CSS:背景、阴影 |
文章目录
渐变重复渐变径向渐变
阴影
我们在写样式,设置背景效果的时候,是用到了background属性。它是以下几个属性的简写:
background-image,指定一个文件或者是生成的颜色渐变作为背景图片;background-position,设置背景图片的初始位置;background-size,指定元素内的背景图片的渲染尺寸;background-repeat,设置需要填充整个元素,是否平铺图片;background-origin,设置背景相对于元素的边框、内边距或者是内容盒子来定位;background-attachment,指定背景图片随着元素上下滚动;background-color,设置纯颜色背景,这个颜色是渲染到背景图片的下方,一般情况在设置背景图片的同时还设置背景颜色,是为了避免背景图片未填充整个元素的时候,设置一个默认的背景颜色;background-clip,设置背景是否应该填充边框、内边距或者内容盒子
渐变
渐变是通过linear-gradient()函数来定义,一般情况下,是设置三个参数:角度、起始颜色、终止颜色。 当然,这并不是一直只设置这三个参数,有时候,可能不需要设置角度值,有时候也可能不需要设置多个颜色值,具体情况根据具体的需求来定。 现在来演示一下渐变的效果: DOCTYPE html> Document * { margin: 0; } div { width: 100px; height: 100px; background: linear-gradient(45deg,red,blue); }div没有任何内容,那么需要设置具体的尺寸,这样设置背景,才能看到效果:
角度值比较特殊的几个值: 0deg代表垂直向上(相当于to top),更大的值会沿着顺时针变化,因此90deg代表向右渐变,180deg代表向下渐变,360deg又会代表向上渐变。 角度除了单位deg外,还有: ❑ rad——弧度(radian)。一个完整的圆是2π,大概是6.2832弧度。 ❑ turn——代表环绕圆周的圈数。一圈相当于360度(360deg)。可以使用小数来表示不足一圈,比如0.25turn相当于90deg。 ❑ grad——百分度(gradian)。一个完整的圆是400百分度(400grad),100grad相当于90deg。 background-image: linear-gradient(90deg,pink 35%,red 34%,blue 81%); 当我们想要一个重复渐变的效果,但是又不想手动重复设置相同的颜色值的时候,可以通过repeating-linear-gradient()函数来设置。 条纹效果就是通过repeating-linear-gradient()函数来实现的: div { margin: 100px auto; width: 450px; height: 10px; /* background-image: linear-gradient(90deg,pink 35%,red 34%,blue 81%); */ background: repeating-linear-gradient(45deg,#57b,#aaa 10px,#124 20px); }径向渐变是从一个点开始,向外扩展的渐变。和线性渐变一样,可以设置多个颜色,使用百分比或者是长度单位指定位置;也可以设置径向渐变为椭圆或者是圆形。 background: radial-gradient(red,blue);
设置圆形径向渐变:radial-gradient(circle,white,midnightblue) 阴影是可以给元素添加立体感的特效,在css中,有两个属性可以设置阴影:box-shadow和text-shadow。 box-shadow:设置元素盒子生成阴影 text-shadow:文字生成阴影。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |