前端学习——CSS3

最新推荐文章于 2024-11-14 15:33:48 发布
最新推荐文章于 2024-11-14 15:33:48 发布
阅读量901 收藏 4
点赞数
分类专栏： 前端 文章标签： 前端 学习 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46574748/article/details/131540894
版权

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

新增长度单位

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box1 {
            width: 200px;
            height: 200px;
            background-color: deepskyblue;
        }
        .box2 {
            width: 50vw;
            height: 20vh;
            background-color: deeppink;
        }
        .box3 {
            width: 20vmax;
            height: 20vmin;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box1">像素</div>
    <div class="box2">vw和vh</div>
    <div class="box3">vmax和vmin</div>
</body>
</html>

在这里插入图片描述

新增盒子模型

box-sizing

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: deepskyblue;
            padding: 5px;
            border: 5px solid black;
            margin-bottom: 20px;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: gray;
            padding: 5px;
            border: 5px solid black;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

在这里插入图片描述

resize

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1 {
            width: 400px;
            height: 400px;
            background-color: orange;
            resize: both;
            overflow: scroll;
        }
        .box2 {
            width: 800px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    
</body>
</html>

在这里插入图片描述

box-shadow

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1 {
            width: 400px;
            height: 400px;
            background-color: orange;
            margin: 0 auto;
            margin-top: 100px;
            font-size: 40px;
            /* 2个值：水平位置，垂直位置 */
            /* box-shadow: 10px 10px; */

             /* 3个值：水平位置，垂直位置，阴影颜色 */
             /* box-shadow: 10px 10px blue; */

              /* 3个值：水平位置，垂直位置，模糊程度 */
              /* box-shadow: 10px 10px 20px; */

              /* 4个值：水平位置，垂直位置，模糊程度，阴影颜色 */
              /* box-shadow: 10px 10px 20px blue; */

              /* 5个值：水平位置，垂直位置，模糊程度，阴影外延，阴影颜色 */
              /* box-shadow: 10px 10px 20px 0px blue; */

               /* 6个值：水平位置，垂直位置，模糊程度，阴影外延，阴影颜色，内阴影 */
              /* box-shadow: 10px 10px 20px 0px blue inset;  */
        }
    </style>
</head>
<body>
    <div class="box1">你好啊</div>
</body>
</html>

opacity

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: orange;
            font-size: 40px;
            opacity: 0.5;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="box1">你好啊</div>
</body>
</html>

在这里插入图片描述

新增背景相关属性

background-origin

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1 {
            width: 400px;
            height: 400px;
            background-color: skyblue;
            margin: 0 auto;
            font-size: 40px;
            padding: 50px;
            border: 50px dashed rgba(255,0,0,0.7);
            background-image: url("资料/图片/bg01.jpg");
            background-repeat: no-repeat;
            background-origin: content-box;
        }

    </style>
</head>

<body>
    <div class="box1">你好啊</div>
</body>

</html>

在这里插入图片描述

background-clip

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1 {
            width: 400px;
            height: 400px;
            background-color: skyblue;
            margin: 0 auto;
            font-size: 40px;
            padding: 50px;
            border: 50px dashed rgba(255,0,0,0.7);
            background-image: url("资料/图片/bg02.jpg");
            background-repeat: no-repeat;
            background-clip: padding-box;
        }

    </style>
</head>

<body>
    <div class="box1">你好啊</div>
</body>

</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1 {
            width: 400px;
            height: 400px;
            background-color: skyblue;
            margin: 0 auto;
            font-size: 40px;
            padding: 50px;
            border: 50px dashed rgba(255,0,0,0.7);
            color: transparent;
            background-image: url("资料/图片/bg02.jpg");
            background-repeat: no-repeat;
            background-clip: padding-box;
            -webkit-background-clip: text;
        }

    </style>
</head>

<body>
    <div class="box1">你好啊</div>
</body>

</html>

在这里插入图片描述

background-size

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            background-image: url('./资料/图片/bg03.jpg');
            /* background-size: 400px 400px; */
            /* background-size: 100% 100%; */
            /* background-size: contain; */
            background-size:auto;
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

background复合属性

在这里插入图片描述

多背景图

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            background: url('./资料/图片/bg-lt.png') no-repeat left top,
                        url('./资料/图片/bg-rt.png') no-repeat right top,
                        url('./资料/图片/bg-lb.png') no-repeat left bottom,
                        url('./资料/图片/bg-rb.png') no-repeat right bottom;
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

在这里插入图片描述

新增边框相关属性

边框圆角

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        div {
            width: 400px;
            height: 400px;
            border: 2px solid black;
            margin: 0 auto;
            /* border-radius: 200px; */
            /* border-radius: 50%; */

            /* border-top-left-radius: 100px;
            border-top-right-radius: 50px;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 10px; */

            /* border-top-left-radius: 100px 50px;
            border-top-right-radius: 50px 20px;
            border-bottom-left-radius: 20px 10px;
            border-bottom-right-radius: 10px 5px; */

            /* border-radius: 100px 50px 20px 10px / 50px 20px 10px 5px; */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

边框外轮廓

在这里插入图片描述

新增文本属性

文本阴影

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        h1 {
            font-size: 80px;
            text-align: center;
            color: white;
            /* text-shadow: 3px 3px 10px red; */

            text-shadow: 0px 0px 15px black;
        }
    </style>
</head>
<body>
    <h1>你好呀</h1>
</body>
</html>

在这里插入图片描述

文本换行

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        div {
           width: 400px;
           height: 400px;
           border: 1px solid black;
           font-size: 20px;
           white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <div>
        山回路转不见君山回路转不见君       
        雪上空留马行处山回路转不见君
        雪上空留马行处山回路转不见君
        雪上空留马行处
        雪上空留马行处
        山回路转不见君
        雪上空留马行处
        山回路转不见君
        雪上空留马行处
        山回路转不见君
        雪上空留马行处
        山回路转不见君
        雪上空留马行处
        山回路转不见君
        雪上空留马行处
    </div>
</body>
</html>

在这里插入图片描述

文本溢出

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        ul {
           width: 400px;
           height: 400px;
           border: 1px solid black;
           font-size: 20px;
           list-style: none;
           padding-left: 0;
        }
        li {
            margin-bottom: 10px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <ul>
        <li>新闻 |东城区：禁毒宣传进万家，织密防毒“安全网”</li>
        <li>“选学校还是选专业重要？”新闻专业到底是不是如张雪峰所说的？
        </li>
        <li>小暑来啦</li>
    </ul>
</body>
</html>

在这里插入图片描述

文本修饰

在这里插入图片描述

在这里插入图片描述

文本描边

在这里插入图片描述

新增渐变

线性渐变

前端学习——CSS布局
qq_42355032的博客
06-30 1337
CSS页面布局技术允许拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。正常布局流是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。 下面布局技术会覆盖默认的布局行为：在 css 中实现页面布局的主要方法是设定属性的值。此属性允许我们更改默认的显示方式。正常流中的所有内容都有一个display的值，用作元素的默认行为方式。 更改默认显示行为。例如，元素默认为，这意味着在我们的英文文档中，列表项显示为一个在另一个之下。如果我们将显示值更改为，它们将显示在彼此旁
前端开发学习——CSS定位
2302_80311379的博客
09-04 1767
1.标准流块级元素独占一行——垂直布局行内元素/行内块元素一行显示多个——水平布局2.浮动可以让原本垂直布局的块级元素变成水平布局3.定位可以让元素自由的摆放在网页的任意位置一般用于盒子之间的层叠情况介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动代码：position:absolute;需配合方位属性实现移动默认相对于浏览器可视区域进行移动在页面中不占位置——脱标应用场景配合绝对定位组CP（子绝父相）/* 绝对定位。
前端学习————css实现简单登录页面
qq_63606575的博客
03-13 6489
css实现简单登录页面一、页面展示二、思路1.设置背景图片2.设置登录框框并使其处于靠右位置3.设置登录框框内容三、代码展示1.HTML2.css 一、页面展示 二、思路 1.设置背景图片 2.设置登录框框并使其处于靠右位置 3.设置登录框框内容 三、代码展示 1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>个人中心</
【前端学习——css】css实现给背景的图片加模糊
Everglowwwwww的博客
04-28 1401
我在制作自己的博客的时候，打算做个封面，封面用半透明颜色盖住了预览图，上面印上了文字，但背景图太乱了，所以打算给背景加模糊效果。
“前端兼容——CSS篇”（进阶版）
qq_34419312的博客
10-29 4697
“前端兼容——CSS篇”（进阶版）
前端系列——CSS
qq_51553982的博客
08-29 665
px是指像素的意思，1px就是一个像素点，是我们常用的长度单位。
前端学习——css盒子模型、css3新特性、伪类、布局0711TODO
qq_37299596的博客
07-11 253
css整体概览
web前端学习（十八）——CSS3表格属性（table）的相关设置
热门推荐
贝尔摩德苦艾酒
01-27 1万+
web前端学习（十八）——CSS3表格属性（table）的相关设置
web前端学习（十三）——CSS3背景属性（background）的相关设置
贝尔摩德苦艾酒
01-21 1万+
web前端学习（十三）——CSS3背景属性（background）的相关设置
【前端学习——css模块化】
Everglowwwwww的博客
05-08 338
在外部管理 CSS，然后将类名映射到组件内部，他会为每个 class 都分配一个全局唯一 hash。为选择器增加冗长的前缀或后缀，来生成全局唯一的命名。
前端学习（二）——css3学习
08-09
前端学习（二）——css3学习
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料，这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...
WEB前端面试——常见CSS知识点
06-30
WEB前端面试——常见CSS知识点 CSS是一种标记语言，用于描述网页的样式和布局。以下是常见的CSS知识点： 一、CSS盒子模型 CSS盒子模型分为标准盒模型（content-box）和怪异盒模型（border-box）。标准盒模型的...
前端学习——CSS3实现时钟效果
younger_LF的博客
11-16 1314
CSS3实现时钟效果 最近想开始认真学习，然后想把学习记录下来，就写在博客这里了。 最先是用CSS实现的是一个时钟的效果，如下图： 实现效果 1.圆盘 说到时钟，肯定最先想到的是一个圆，所以就从一个圆开始。 先写一个div，然后给相关的样式 <div class="clock"></div> .clock{ position: absolute; ...
前端 Flex 布局语法详解
ning的博客
11-10 1122
Flex是Flexible Box的缩写，意为“弹性布局”。它允许容器内的项目（子元素）自动调整大小，以适应不同屏幕尺寸和布局需求。如果需要行内Flex布局，可以使用Flex布局提供了一种强大而灵活的方式来创建响应式布局。通过理解并应用上述属性，你可以轻松地创建出复杂且适应不同屏幕尺寸的布局。随着现代浏览器对Flex布局的广泛支持，它已经成为前端开发中不可或缺的一部分。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章CSDN - Flex布局详解菜鸟教程 - Flex 布局语法教程。
蓝凌OA-EKP hrStaffWebService 任意文件读取漏洞
iSee857的博客
11-12 492
它集成了流程管理、知识管理、会议管理、公文管理、合同管理、费用管控等多个模块，旨在帮助企业解决基础OA应用、系统集成、开发平台和创新业务定制等长期扩展需求，推动企业实现管理在线化、知识赋能化、运营数字化和人机智能化‌。漏洞，未经身份验证攻击者可通过该漏洞读取系统重要文件（如数据库配置文件、系统配置文件）、数据库配置文件等等，导致网站处于极度不安全状态。在处理客户端输入的参数时，进行严格的验证和过滤，防止未授权的文件访问。返回数据经过base64编码 解码后可得读取数据。
前端（1）——快速入门HTML
最新发布
m0_63086198的博客
11-14 552
参考： W3school 1. HTML 我使用的是vs code，在使用之前，先安装以下几个插件： Auto Rename Tage HTML CSS Support Live Server 1.1 HTML标签 HTML全称是Hypertext Markup Language(超文本标记语言) HTML通过一系列的标签(也称为元素)来定义文本、图像、链接等等。HTML,标签是由尖括号包围的关键 字。 标签通常成对出现，包括开始标签和结束标签(也称为双标签)，内容位于这两个标签之间，例如
Vue中的常用指令
m0_62388400的博客
11-12 1136
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
后端一次性返回数据，前端分页
qq_39307266的博客
11-14 158
vue 结合elementUI 分页组件，后端一次性返回数据，前端做分页。1.template中。js从后端获取总数据。
CSS与CSS3前端美化页面学习笔记完整版
二、CSS与CSS3学习细节 CSS的学习涉及到基础知识，如选择器、属性和值的使用，以及盒模型、浮动、定位等核心概念。CSS3则在此基础上，加入了更多现代化的特性，例如： 1. 新选择器：如属性选择器、伪类选择器和伪...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值