CSS3新增盒子属性(三)

news/2024/12/5 9:41:03/

1、CSS3新增盒子属性

1.1 box-sizing

设置盒子的大小。

  • content-box:设置内容区的大小;
  • border-box:设置盒子的总大小。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>box-sizing</title><style>css">.d1 {height: 200px;width: 200px;padding: 5px;margin: 5px;border: 1px solid black;background-color: aqua;text-align: center;line-height: 200px;box-sizing: content-box;}.d2 {height: 200px;width: 200px;padding: 5px;margin: 5px;border: 1px solid black;background-color: blanchedalmond;text-align: center;line-height: 200px;box-sizing: border-box;}</style>
</head><body><div class="d1">设置内容区大小</div><div class="d2">设置盒子大小</div>
</body></html>
1.2 resize

使得盒子的大小用户可调,需要给overflow属性。

  • none:不允许用户调节大小;
  • both:可以调节高度和宽度;
  • horizontal:可以调节宽度;
  • vertical:可以调节高度。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>resize</title><style>css">.inner {height: 300px;width: 300px;background-color: antiquewhite;border: 1px solid skyblue;}.d1 {height: 200px;width: 200px;background-color: aqua;overflow: hidden;resize: both;border: 1px solid black;}.d2 {height: 200px;width: 200px;background-color: rgb(68, 151, 112);overflow: hidden;resize: horizontal;border: 1px solid black;margin-top: 10px;}.d3 {height: 200px;width: 200px;background-color: rgb(46, 153, 153);overflow: hidden;resize: vertical;border: 1px solid black;margin-top: 10px;}</style>
</head><body><div class="d1"><div class="inner"></div></div><div class="d2"></div><div class="d3"></div>
</body></html>
1.3 box-shadow
  • box-shadow: 5px 5px 20px 10px yellow inset;
  • 分别代表:水平位置 垂直位置 模糊程度 外延值 阴影颜色 内阴影 必须有水平和垂直位置,其它属性可选
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>box-shadow</title><style>css">div {height: 200px;width: 200px;text-align: center;line-height: 200px;background-color: red;font-size: 20px;margin: 0 auto;box-shadow: 0px 0px 80px 10px black inset;}</style>
</head><body><div>阴影</div>
</body></html>

1.4 opacity

调整元素不透明度,范围为0-1,0为完全透明,1为完全不透明。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>opacity</title><style>css">div {width: 200px;height: 200px;margin: auto;background-color: aqua;border: 1px solid black;position: relative;text-align: center;}h2 {position: relative;opacity: 0.3;top: 30px;}</style>
</head><body><div><h2>不透明度</h2></div></body></html>

http://www.ppmy.cn/news/1543753.html

相关文章

《向量数据库指南》——解锁GenAI生态系统新纪元

哈喽,大家好!我是你们的老朋友,大禹智库的向量数据库高级研究员王帅旭,也是那本备受好评的《向量数据库指南》的作者。今天啊,咱们来聊聊生成式人工智能(GenAI)生态系统,特别是向量数据库在其中扮演的关键角色。这话题可有意思了,保证让你大开眼界! 自从20个月前Cha…

2024年10月28日练习(双指针算法)

一.11. 盛最多水的容器 - 力扣&#xff08;LeetCode&#xff09; 1.题目描述&#xff1a; 这个题目代表的意思就是数组上每个对应的值就相当于每条垂直线的高度&#xff0c;就相当于短板效应&#xff0c;两 个高度的线会取最短的长度因为那样水才不会漏。而两条线的数组的下标…

Windows 上更新OpenSSL 到 1.1.1

在 Windows 上更新 OpenSSL 到 1.1.1 版本可以通过以下步骤完成&#xff1a; 步骤 1&#xff1a;下载 OpenSSL 1.1.1 安装包 由于 OpenSSL 官网不直接提供 Windows 安装包&#xff0c;可以通过以下两个可靠的第三方站点下载预编译的 OpenSSL 1.1.1 版本&#xff1a; Shining …

DDRPHY数字IC后端设计实现系列专题

在对 LPDDR3 物理层接口模块进行后端设计之前&#xff0c;需要对该模块的功能结 构以及后端物理设计流程的相关理论进行深入的分析和研究。本章第一节详细分 析了本次 LPDDR3 物理层接口模块的结构&#xff0c;为该模块的布图布局的合理规划奠 定了理论基础&#xff0c;并且分析…

Mac安装Rust

Mac安装Rust 1. 介绍 Rust 是一种极具特色的系统编程语言。它以严格的内存安全机制确保程序无内存访问错误&#xff0c;实现高性能的同时保持代码可读性与可维护性&#xff0c;还提供安全的并发编程模型。在应用上&#xff0c;适用于系统编程、Web 开发及区块链等领域。其优势…

嵌入式浏览器 -- Chromium VS Firefox

嵌入式浏览器概念 嵌入式浏览器是嵌入式系统中的核心组件之一&#xff0c;用于为设备提供网络访问能力和内容显示功能。与传统PC浏览器相比&#xff0c;嵌入式浏览器更加注重性能优化和资源效率&#xff0c;同时确保核心功能可用&#xff0c;如HTML渲染、JavaScript支持和多媒…

探索Python终端美化的终极利器:Rich库

文章目录 &#x1f680; 探索Python终端美化的终极利器&#xff1a;Rich库第一部分&#xff1a;背景介绍第二部分&#xff1a;Rich库是什么&#xff1f;第三部分&#xff1a;如何安装Rich库&#xff1f;第四部分&#xff1a;Rich库的简单函数使用方法第五部分&#xff1a;结合场…

如何保护网站安全

1. 使用 Web 应用防火墙&#xff08;WAF&#xff09; 功能&#xff1a;WAF 可以实时检测和阻止 SQL 注入、跨站脚本&#xff08;XSS&#xff09;、文件包含等常见攻击。它通过分析 HTTP 流量来过滤恶意请求。 推荐&#xff1a;可以使用像 雷池社区版这样的 WAF&#xff0c;它提…