CSS3 - 新特性（二）

最新推荐文章于 2022-07-13 13:58:55 发布

学习中的小菜鸟.

最新推荐文章于 2022-07-13 13:58:55 发布

阅读量163

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_33962481/article/details/117348539

版权

CSS 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

文章目录

一、CSS3盒子模型
- content-box
- border-box
二、图片模糊
三、过渡
- 语法
- 属性

一、CSS3盒子模型

CSS3中可以通过box-sizing 来指定盒模型，有2个值：可指定为 content-box, boder-box, 这样计算盒子大小的方式就发生了改变

content-box

box-sizing: content-box 盒子大小为width + padding + border

border-box

box-sizing: border-box 盒子大小为width
如果盒子模型改为了 box-sizing: border-box ，那padding和border就不会撑大盒子了。

二、图片模糊

filter CSS属性将模糊或颜色偏移等图形效果应用于元素

语法

filter: 函数(); 
例如 : filter: blur(5px);	blur模糊处理, 数值越大越模糊

函数

在这里插入图片描述

blur函数

blur函数用于图片模糊处理. 里面的数值越大, 图片越模糊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            filter: blur(5px)
        }
    </style>
</head>

<body>
    <img src="./images/tudou.jpg">
</body>

</html>

calc函数

calc()函数可以在声明CSS属性值时执行一些计算

width: calc(100% -80px)

三、过渡

过渡动画是从一个状态, 渐渐的过渡到另外一种状态

语法

transtion: 要过渡的属性 花费时间 运动曲线 何时开始

属性

属性 : 想要变化的CSS属性, 宽度高度背景颜色内外边距都可以. 如果想要所有的属性都改变, 可以写all
花费时间 : 单位是秒 . 比如0.5s
运动曲线 : 默认是ease
何时开始 : 单位是秒, 可以设置延迟触发时间.

学习中的小菜鸟.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 - 新特性（二）

文章目录二、content-box二、border-box# 一、CSS3盒子模型 CSS3中可以通过box-sizing 来指定盒模型，有2个值：可指定为 content-box, boder-box, 这样计算盒子大小的方式就发生了改变二、content-boxbox-sizing: content-box 盒子大小为width + padding + border二、border-boxbox-sizing: border-box 盒子大小为width如果盒子模型改为了
复制链接

扫一扫

专栏目录