前端学习——CSS3

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

新增长度单位

在这里插入图片描述

<!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>

在这里插入图片描述

文本修饰

在这里插入图片描述

在这里插入图片描述

文本描边

在这里插入图片描述

新增渐变

线性渐变

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/13970.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

FPGA综合设计实验：基于PWM脉宽调制的呼吸流水灯设计

FPGA综合设计实验：基于PWM脉宽调制的呼吸流水灯设计

目录 一、引言 二、项目准备 1.项目预期目标 2.项目原理及总体实现思路 三、项目模块设计 1.顶层模块 2.按键控制模块 3.呼吸灯模块 4.数码管显示模块 5.二进制转BCD码模块 四、项目测试 1.仿真测试 2.实物测试 五、项目总结 1.选题思考与过程反思 2.设计的具体…
阅读更多...
Android 短视频直播特效,音视频图像处理 FFmepg OpenGLES OpenCV开发详细内容

Android 短视频直播特效,音视频图像处理 FFmepg OpenGLES OpenCV开发详细内容

1 音视频开发基础 2 Android OpenGL ES开发基础 3 Android FFmpeg OpenGLES 音视频播放器核心开发 4 Android FFmpeg H.264 AAC 封装mp4 5 Android OpenCV 机器学习人脸标定SDK开发实战 6 Android OpenCV 开发实践 7 Android 短视频App FFmpeg OpenGL ES OpenCV人脸特效渲…
阅读更多...
Nanopc T4 教程使用及获取

Nanopc T4 教程使用及获取

所有资料从以下链接获取 ● Wiki教程&#xff1a;http://wiki.friendlyarm.com/wiki/index.php/NanoPC-T4/zh 机械结构图&#xff08;dxf格式&#xff09;&#xff1a;http://wiki.friendlyarm.com/wiki/images/b/bc/NanoPC-T4_1802_Drawing%28dxf%29.zip 原理图&#xff1a;h…
阅读更多...
基于matlab处理 RGB-D图像数据以构建室内环境地图并估计相机的轨迹（附源码）

基于matlab处理 RGB-D图像数据以构建室内环境地图并估计相机的轨迹（附源码）

一、前言 视觉同步定位和映射 &#xff08;vSLAM&#xff09; 是指计算摄像机相对于周围环境的位置和方向&#xff0c;同时映射环境的过程。 您可以使用单眼摄像头执行 vSLAM。但是&#xff0c;深度无法准确计算&#xff0c;估计的轨迹未知&#xff0c;并且随着时间的推移而漂…
阅读更多...
神经网络术语解释

神经网络术语解释

目录 Padding&#xff1a; 填充步幅&#xff08;stride&#xff09;Pooling Layer:池化层Batch NormalizationSeparable ConvolutionsREFERENCE Padding&#xff1a; 填充 在进行卷积层的处理之前&#xff0c;有时要向输入数据的周围填入固定的数据&#xff08;比 如0等&#…
阅读更多...
电动汽车充电站监控系统设计_kaic

电动汽车充电站监控系统设计_kaic

1 绪论 1.1 引言 汽车工业的告诉发展&#xff0c;汽车带来的环境污染、能源短缺、资源枯竭和安全等方面的问题越来越突出。为了保持国民经济的可持续发展&#xff0c;保护人类居住环境和能源供给&#xff0c;各国政府不惜巨资&#xff0c;投入大量人力、物力&#xff0c;寻…
阅读更多...
Ae 效果：CC Threshold RGB

Ae 效果：CC Threshold RGB

风格化/CC Threshold RGB Stylize/CC Threshold RGB CC Threshold RGB&#xff08;CC 阈值 RGB&#xff09;效果可以为红、绿、蓝三个原色通道分别设置阈值&#xff0c;即&#xff0c;通道上高于此阈值时为纯白&#xff0c;低于此阈值时纯黑&#xff0c;以实现对原色通道的二值…
阅读更多...
获取系统时间日期相关接口梳理

获取系统时间日期相关接口梳理

时间&日期 ##MyTime.hpp #pragma once #include <iostream> #include <ctime> #include <string>using namespace std;class MyTime { public:MyTime() {};~MyTime() {};time_t timeSec(void);uint64_t timeMs(void);string timeDate(void); };##MyTim…
阅读更多...
大语言模型的百家齐放

大语言模型的百家齐放

基础语言模型 概念 基础语言模型是指只在大规模文本语料中进行了预训练的模型&#xff0c;未经过指令和下游任务微调、以及人类反馈等任何对齐优化。 如何理解 只包含纯粹的语言表示能力,没有指导性或特定目标。 只在大量无标注文本上进行无监督预训练,用于学习语言表示。 …
阅读更多...
TCP连接管理（三次握手，四次挥手）

TCP连接管理（三次握手，四次挥手）

目录 一、回顾一下TCP包头二、连接的建立——“三次握手”三、连接的建立——“四次挥手”保活计时器 一、回顾一下TCP包头 源端口号&#xff08;Source Port&#xff09;&#xff1a;16 位字段&#xff0c;表示发送方的端口号。 目的端口号&#xff08;Destination Port&…
阅读更多...
Python——爬虫入门

Python——爬虫入门

爬虫的流程 第一步:获取网页内容 浏览器访问网页时也是一样&#xff0c;都是先发个请求获取网页内容&#xff0c;但是浏览器多了个渲染的步骤。 程序获取的内容都是网页源代码 第二步:解析网页内容 第三步:储存或分析数据 要做数据集就存起来&#xff0c;要做数据分析就形…
阅读更多...
IP 协议(网络层协议)

IP 协议(网络层协议)

IP协议 IP 协议作用地址管理动态分配 IP 地址NAT 机制IPv6IP 地址的组成 路由选择 IP 协议作用 主要有两点 : 地址管理 为每个上网的设备分配一个唯一地址. 路由选择 两台主机间的信息交互, 具体走哪条线路. 地址管理 先来看看 IP协议 报文格式 : IP 协议最主要就是 32 位的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023