当前位置： 首页 > news >正文

CSS笔记（黑马程序员pink老师前端）圆角边框

news 2026/3/28 6:10:01

圆角边框

border-radius:length;

效果显示
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><style>* {margin: 0;padding: 0;}div {display: inline-block;margin-top: 20px;margin-left: 30px;background-color: pink;}.div1 {/* 圆角边框,用半径为10px的圆,切原有的矩形 */border-radius: 10px;height: 100px;width: 200px;}.div2 {/* border-radius的值也可为百分比,当切角圆的半径为正方形的一半时,显示为圆形 */border-radius: 50%;height: 100px;width: 100px;}.div3 {/*圆的半径为高度的一半 */border-radius: 60px;height: 100px;width: 200px;}.div4 {/*依次设置不同的角 */border-radius: 10px 20px 40px 80px;height: 100px;width: 200px;}.div5 {/*只有两个值,为对角线关系 */border-radius: 40px 10px;height: 100px;width: 200px;}.div6 {/*单独设一个角,top与left的顺序不能变 */border-top-left-radius: 20px;height: 100px;width: 200px;}
</style><body><div class="div1"></div><div class="div2"></div><div class="div3"></div><div class="div4"></div><div class="div5"></div><div class="div6"></div>
</body></html>

相关文章：

CSS笔记（黑马程序员pink老师前端）圆角边框

圆角边框 border-radius:length; 效果显示 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Documen…...

编程日记 2023/9/10 12:08:30

水表电表集中远程抄表系统分析

电表水表远程抄表系统石家庄光大远通电气有限公司主要经营自动抄表,远程抄表,集中抄表,新供应信息&#xff0c;是石家庄光大远通电气有限公司自动远程抄表系统集信号采集、网络通信于一体的高性能抄表装置&#xff0c;该系统以485通讯方式读取水表电表的数据,以MBUS通讯方式读取…...

编程日记 2023/9/10 12:07:29

Android 通知

1. 原生Android通知的几种显示方式&#xff1a; 状态栏的图标&#xff1a;发出通知后&#xff0c;通知会先以图标的形式显示在状态栏中。 抽屉式通知栏&#xff1a;用户可以在状态栏向下滑动以打开抽屉式通知栏&#xff0c;并在其中查看更多详情及对通知执行操作。在应用或用户…...

编程日记 2023/9/10 12:06:28

【Unittest】Requests实现小程序项目接口测试

文章目录 一、搭建接口测试框架二、初始化日志三、定义全局变量四、封装接口五、编写测试用例六、生成测试报告 一、搭建接口测试框架 目录结构如下。 二、初始化日志 在utils.py文件中编写如下如下代码&#xff0c;初始化日志。 # 导入app.py全局变量文件 import app import l…...

编程日记 2023/9/10 12:05:27

Mac 搭建本地服务器

文章目录 一、启动服务器二、添加文件到本地服务三、手机/其他电脑 访问本机服务器 MacOS 自带Apatch 服务器。所以我这里选择Apatch服务器搭建 一、启动服务器 在safari中输入 http://127.0.0.1/ &#xff0c;如果页面出现 it works&#xff0c;则代表访问成功。启动服务器 …...

编程日记 2023/9/10 12:04:26

区块链基础之编写合约二

一、了解solidity中的关键字。 二、了解solidity中的类型。 三、编写合约 1.这里列出一些solidity中的关键字&#xff0c;有哪些。 pragma 作用&#xff1a;是告知编译器如何处理源代码的通用指令&#xff08;例如&#xff0c; pragma once &#xff09;。public 作用&#…...

编程日记 2023/9/10 12:03:25

【前端基础】js 如何判断一个值是数组

在JavaScript中&#xff0c;可使用不同的方法来判断一个值是否是一个数组。以下是一些常用的方法&#xff1a; 使用 Array.isArray() 方法&#xff1a; if (Array.isArray(value)) {// 值是一个数组 } else {// 值不是一个数组 }Array.isArray() 方法是最简单和推荐的方法&…...

编程日记 2023/9/10 12:02:23

Linux之NFS服务器

目录 Linux之NFS服务器 简介 NFS背景介绍 生产应用场景 NFS工作原理 NFS工作流程图 流程 NFS的安装 安装nfs服务 安装rpc服务 启动rpcbind服务同时设置开机自启动 启动nfs服务同时设置开机自启动 NFS的配置文件 主配置文件分析 示例 案例 --- 建立NFS服务器&#…...

编程日记 2023/9/10 12:01:22

ES delete_by_query条件删除的几种方式

es 查询删除的几种方式 1.根据id删除 #根据id删除 POST /indexname/_delete_by_query {"query": { "match": {"id": "100000"}} } 2.根据多个id删除 #根据多个id删除 POST /indexname/_delete_by_query {"query": {"…...

编程日记 2023/9/10 12:00:20

1.springboot 集成elasticsearch组件

1.前置条件已经安装和搭建好了elasticsearch中间件 一&#xff1a;项目中引入elasticsearch相关依赖 我安装的elasticsearch版本是7.10.2 对应依赖的版本保持一致 此处省略springboot 搭建及必要的依赖项 <dependency><groupId>org.elasticsearch.client</group…...

编程日记 2023/9/10 11:59:19

【学习笔记】元学习如何解决计算机视觉少样本学习的问题？

目录 1 计算机视觉少样本学习 2 元学习 3 寻找最优初始参数值方法&#xff1a;MAML 3.1 算法步骤 3.2 代码&#xff1a;使用MAML 和 FO-MAML、任务增强完成Few-shot Classification 4 距离度量方法&#xff1a;Siamese Network,ProtoNet,RN 4.1 孪生网络&#xff08;Sia…...

编程日记 2023/9/10 11:58:18

【C语言】17-函数-3

1. 链接属性 当组成一个程序的各个源文件分别被编译之后，所有的目标文件以及那些从一个或多个函数库中引用的函数将链接在一起，形成可执行程序。然而，如果相同的标识符出现在几个不同的源文件中时，它们是表示同一个实体，还是表示不同的实体？标识符的链接属性决定如何处理…...

编程日记 2023/9/10 11:57:17

人工智能：为你提供的未来工作岗位

随着科技的快速发展&#xff0c;人工智能(Artificial Intelligence,AI)正逐渐渗透到各个领域。本文探讨一下人工智能可以提供的工作岗位&#xff0c;以期帮助大家更好地了解这个新兴行业的就业前景。 文章目录 1 机器学习工程师2 数据科学家3 自然语言处理工程师4 机器视觉工程…...

编程日记 2023/9/10 11:56:16

HashMap、LinkedHashMap、ConcurrentHashMap、ArrayList、LinkedList的底层实现。

HashMap、LinkedHashMap、ConcurrentHashMap、ArrayList、LinkedList的底层实现。 HashMap相关问题 1、你用过HashMap吗&#xff1f;什么是HashMap&#xff1f;你为什么用到它&#xff1f;用过&#xff0c;HashMap是基于哈希表的Map接口的非同步实现&#xff0c; 它允许null键…...

编程日记 2023/9/10 11:55:15

flink学习之广播流与合流操作demo

广播流是什么&#xff1f; 将一条数据广播到所有的节点。使用 dataStream.broadCast() 广播流使用场景&#xff1f; 一般用于动态加载配置项。比如lol&#xff0c;每天不断有人再投诉举报&#xff0c;客服根本忙不过来&#xff0c;腾讯内部做了一个判断&#xff0c;只有vip3…...

编程日记 2023/9/10 11:54:13

PPT架构师架构技能图

PPT架构师架构技能图 目录概述需求&#xff1a; 设计思路实现思路分析1.软素质2.核心输出&#xff08;office输出&#xff09; 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,ma…...

编程日记 2023/9/10 11:53:11

STM32微控制器的低功耗模式

STM32微控制器的低功耗模式（Low-power modes）：Sleep mode、Stop mode 和 Standby mode。 1.1 Sleep Mode（睡眠模式）： 把STM32微控制器当作一位劳累的工人，他在工作过程中需要短暂的休息。在Sleep模式下，微控制器会关闭一部分电路，减小功耗，但仍然保持对中央处理单…...

编程日记 2023/9/10 11:52:10

tensorflow QAT

tensorflow qat https://www.wpgdadatong.com/tw/blog/detail/70672 在边缘运算的重点技术之中&#xff0c;除了简化复杂的模块构架&#xff0c;来简化参数量以提高运算速度的这项模块轻量化网络构架技术之外。另一项技术就是各家神经网络框架&#xff08;TensorFlow、Pytorc…...

编程日记 2023/9/10 11:51:09

[杂谈]-快速了解LoRaWAN网络以及工作原理

快速了解LoRaWAN网络以及工作原理 文章目录 快速了解LoRaWAN网络以及工作原理1、LoRaWAN网络元素1.1 终端设备&#xff08;End Devices&#xff09;1.2 网关&#xff08;Gateways&#xff09;1.3 网络服务器&#xff08;Net Server&#xff09;1.4 应用服务器&#xff08;Appli…...

编程日记 2023/9/10 11:50:07

MySQL--MySQL表的增删改查（基础）

排序&#xff1a;ORDER BY 语法&#xff1a; – ASC 为升序&#xff08;从小到大&#xff09; – DESC 为降序&#xff08;从大到小&#xff09; – 默认为 ASC SELECT … FROM table_name [WHERE …] ORDER BY column [ASC|DESC], […]; *** update...

编程日记 2023/9/10 11:49:06

dynamic-datasource JVM调优：提升多数据源性能的7个实用技巧

dynamic-datasource JVM调优&#xff1a;提升多数据源性能的7个实用技巧 【免费下载链接】dynamic-datasource dynamic datasource for springboot 多数据源 动态数据源 主从分离 读写分离 分布式事务 项目地址: https://gitcode.com/gh_mirrors/dy/dynamic-datasource …...

编程新知 2026/3/28 5:26:03

精准匹配歌词：Foobar2000歌词插件配置完全指南

精准匹配歌词&#xff1a;Foobar2000歌词插件配置完全指南 【免费下载链接】ESLyric-LyricsSource Advanced lyrics source for ESLyric in foobar2000 项目地址: https://gitcode.com/gh_mirrors/es/ESLyric-LyricsSource 3分钟完成版本适配检测 如何确定你的Foobar20…...

编程新知 2026/3/28 3:37:36

Ludusavi：你的游戏进度守护神，三分钟搞定跨平台存档备份

Ludusavi&#xff1a;你的游戏进度守护神&#xff0c;三分钟搞定跨平台存档备份 【免费下载链接】ludusavi Backup tool for PC game saves 项目地址: https://gitcode.com/gh_mirrors/lu/ludusavi 你是否曾在电脑崩溃后&#xff0c;发现数百小时的游戏进度瞬间归零&…...

编程新知 2026/3/28 2:51:10

M5Stack U126 RTC驱动库：PCF8563T嵌入式实时时钟深度解析

1. 项目概述M5Unit-RTC 是专为 M5Stack 生态中 Unit 系列模块设计的轻量级实时时钟&#xff08;RTC&#xff09;驱动库&#xff0c;对应硬件型号为U126—— 一款基于Ricoh RP5C01A 兼容架构、实际采用 NXP PCF8563T 实时时钟芯片的 IC 接口 RTC 模块。该模块集成高精度温度补偿…...

编程新知 2026/3/28 2:47:07

不用命令行！Win11任务栏图标消失的图形化解决方案（Explorer重启神器推荐）

Win11任务栏图标消失&#xff1f;5种可视化修复方案与深度解析 每次切换虚拟桌面后&#xff0c;Win11任务栏图标集体"失踪"的毛病&#xff0c;堪称微软系统最顽固的"幽灵故障"之一。作为从Windows 95时代就存在的资源管理器痼疾&#xff0c;这个问题在Win1…...

编程新知 2026/3/28 2:45:06

避坑指南：如何在torch 2.4.0 + CUDA 12.1环境下成功安装llamafactory及其依赖

深度避坑&#xff1a;PyTorch 2.4.0与CUDA 12.1环境下的Llamafactory全栈部署实战 当开发者尝试在PyTorch 2.4.0和CUDA 12.1环境下部署Llamafactory时&#xff0c;往往会陷入依赖地狱——从Torch版本误装到vllm模块缺失&#xff0c;每个环节都可能成为耗时数小时的深坑。本文将…...

编程新知 2026/3/27 21:39:57

从数据采集到模型部署：用Lerobot+本地数据集训练一个会抓积木的机械臂（避坑指南）

从数据采集到模型部署&#xff1a;用Lerobot本地数据集训练一个会抓积木的机械臂&#xff08;避坑指南&#xff09; 当机械臂第一次准确抓取乐高积木并放入指定盒子时&#xff0c;那种成就感远超单纯调通代码的快感。Lerobot框架的出现&#xff0c;让机器人学习从实验室走向个人…...

编程新知 2026/3/27 21:07:45

ente/auth缓存机制详解：提高系统响应速度

ente/auth缓存机制详解&#xff1a;提高系统响应速度 【免费下载链接】ente 完全开源&#xff0c;端到端加密的Google Photos和Apple Photos的替代品 项目地址: https://gitcode.com/GitHub_Trending/en/ente ente/auth作为专注于移动设备的两步验证&#xff08;2FA&…...

编程新知 2026/3/27 20:51:39

小白程序员必看：收藏这份上下文工程指南，轻松玩转大模型！

本文深入浅出地介绍了上下文工程在大语言模型中的重要性&#xff0c;阐述了指令、示例、知识、记忆、工具和安全护栏等六种上下文类型。文章详细解析了上下文工程的四个基本阶段&#xff1a;撰写上下文、选择上下文、压缩上下文和隔离上下文&#xff0c;并强调了上下文窗口的作…...

编程新知 2026/3/27 20:23:31

海康MVS相机+Halcon标定实战：18张图搞定畸变矫正（附标定板选购指南）

海康MVS相机Halcon标定实战&#xff1a;18张图搞定畸变矫正与标定板选购指南 工业视觉系统的精度往往取决于相机标定的准确性。在实际项目中&#xff0c;我们常遇到这样的困境&#xff1a;明明按照教程步骤操作&#xff0c;标定结果却总是不尽如人意。本文将分享一套经过实战验…...

编程新知 2026/3/27 20:17:08