3. CSS3新增样式属性

最新推荐文章于 2024-10-16 11:23:07 发布

MM不是码奴

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量62

点赞数

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/M_1236547/article/details/132463445

版权

3.1 background-image多重背景

在CSS3中可以在一个元素里显示多个背景图像，还可以将多个背景图像进行重叠显示。（最后写在最下面）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            background-image: url(img/1.jpg),url(img/3.jpg),url(img/2.jpg);
            background-repeat: no-repeat, no-repeat, no-repeat;
            background-position: 5% 100%, 95% 0%, top;
            padding: 300px 0;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

3.2 background-image的渐变

渐变配色推荐网站:https://webgradients.com/

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

3.2.1 线性渐变(重点)

语法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

direction:预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。
定义一个角度

如果不设置direction,那么从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色：

#grad {
    width:200px;
    height: 200px;
    background-image: linear-gradient(red, yellow, blue);
}

其他线性渐变：

#grad {
  background-image: linear-gradient(to bottom right, red , yellow);
}
#grad {
  background-image: linear-gradient(to right, red , yellow);
}

3.2.2 径向渐变

径向渐变由它的中心定义。

为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形）。

语法

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

设置形状

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

#grad {
  background-image: radial-gradient(red, yellow, green);
}
#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

3.3 background-size背景缩放(回顾)

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

其参数设置如下：

a) 可以设置长度单位(px)（img大小一样）或百分比（设置百分比时，参照盒子的宽高）

b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多

c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */

温馨提示：background-size属性一定要写在background属性后面。

3.4 CSS3的opacity 属性(重点)

opacity 属性是设置元素的不透明级别

语法

opacity: value|inherit;

值	描述
value	规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
inherit	应该从父元素继承 opacity 属性的值。

3.5 CSS3的filter(滤镜) 属性

filter 属性定义了元素(通常是<img>)的可视效果

语法

 filter: grayscale(100%) | blur(px);

值	描述
grayscale	将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
blur(px)	给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。

3.6 hsla() 函数

表示色相-饱和度-亮度（Hue-saturation-lightness）模式。

h：表示色相，就是颜色，只不过这个颜色是用单个值来表示的

整个颜色用圆形来表示的话，每个度数都对应一个颜色。比如red = 0deg = 360deg green = 120deg blue = 240deg

s和l都用百分比表示 s 的100%就是完全饱和，偏向于原色，而0%就是完全不饱和，偏向于灰色 l 的100%就是亮度最大，偏向于白色，而0%就是没有亮度，偏向于黑色。

.box {
    width: 200px;
    height: 200px;
    background-color: hsla(120, 50%, 50%, 1);
}

3.7 calc() 函数

calc() 函数用于动态计算长度值。

calc(expression)

值	描述
expression	必须，一个数学表达式，结果将采用运算后的返回值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

任何长度值都可以使用calc()函数进行计算；

calc()函数支持 "+", "-", "*", "/" 运算；

calc()函数使用标准的数学运算优先级规则

3.8 box-sizing盒模型属性(回顾)

盒模型分为： W3C标准盒模型和 IE盒模型

1.W3C标准盒子（content-box）：

在这种盒模型下，是指块元素box-sizing属性为content-box的盒模型。

我们所说的元素的 width ，实际上只包含 content

盒子总宽度 = margin + border + padding + width

2.IE盒子（border-box）：

又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型。

在这种盒模型下，我们所说的元素的 width ，实际上包含了 content + padding + border

盒子总宽度= margin + width

MM不是码奴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫