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

【JAVA WEB】 css背景属性 圆角矩形的绘制

news 2026/5/17 22:32:38

目录

背景属性设置

圆角矩形

背景属性设置

背景颜色,在style中

background-color:颜色；

背景图片

background-image:url(……)

 背景图片的平铺方式

background-repeat: 平铺方式

  1. repeat 平铺（默认）
  2. no-repeat 不平铺
  3. repeat-x 水平平铺
  4. repeat-y 垂直平铺

背景图片的位置

 background-position:200px 200px;   //x轴 y轴

//也可以用以下方式

        1.方位名词：（top，left，right，botton）

        2.精确单位：坐标或者百分比，左上角为原点

        3.混合单位：同时包含方位名词和精确单位

背景尺寸

background-size: length | percentage | cover | contain;

  • cover背景图片会完全覆盖背景区域，可能会造成图片未完全显示
  • contain背景图片会有留白

圆角矩形

 border: 2px green solid; /*加边框*/

border-radius: 20px;   /*设置圆角弧度*/

border-radius通常也用来画圆：

当border-radius 的值为高度或者宽度的一般，即可画出圆的效果，如下示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        div{

            width: 200px;

            height: 200px;

            border: 2px green solid; /*加边框*/

            border-radius: 100px;   /*也可换成 border-radius: 50%；*/

        }

    </style>

</head>

<body>

    <div> </div>

</html>

当然我们也可以对一个矩形的四个角进行单独设置

//左上角

border-top-left-radius: 20px;

//右上角

border-top-right-radius: 40px;

//左下角

border-bottom-left-radius: 20px;

//右下角

border-bottom-right-radius: 20px;

上述代码也可以简写为：

border-radius: 20px 40px 20px 20px;  /*按 左上角-右上角-右下角-左下角 的顺序

相关文章：

【JAVA WEB】 css背景属性 圆角矩形的绘制

目录 背景属性设置 圆角矩形 背景属性设置 背景颜色,在style中 background-color:颜色&#xff1b; 背景图片 background-image:url(……) 背景图片的平铺方式 background-repeat: 平铺方式 repeat 平铺&#xff08;默认&#xff09;no-repeat 不平铺repeat-x 水平平铺repea…...

编程日记 2024/2/13 9:04:10

Docker-现代化应用部署的利器

一、容器部署的发展 今天我们来说说容器部署。我们知道容器部署的发展大致分三个阶段&#xff0c;下面来介绍一下不同阶段的部署方式的优缺点 物理机部署 优点是可以提供更高的性能、资源控制&#xff0c;也可以提供更好的数据隔离和安全性&#xff0c;因为不同的应用程序运行在…...

编程日记 2024/2/13 8:58:03

「优选算法」：山脉数组的峰顶索引

一、题目 符合下列属性的数组 arr 称为 山脉数组 &#xff1a; arr.length > 3存在 i&#xff08;0 < i < arr.length - 1&#xff09;使得&#xff1a; arr[0] < arr[1] < ... arr[i-1] < arr[i] arr[i] > arr[i1] > ... > arr[arr.length - 1] …...

编程日记 2024/2/13 8:57:02

网络安全红队基础建设与介绍

1.ATT&CK相关背景 ATT&CK在各种日常环境中都很有价值。开展任何防御活动时&#xff0c;可以应用ATT&CK防御法&#xff0c;参考攻击者及其行为。ATT&CK不仅对网络防御者提供通用技术库&#xff0c;还为渗透测试和红队提供了基础。提到对抗行为时&#xff0c;这为…...

编程日记 2024/2/13 8:54:59

Java语法学习反射

Java语法学习反射 大纲 基本介绍class的介绍 具体案例 1. 基本介绍 流程图&#xff08;程序在计算机的阶段&#xff09; 反射的主要的类 这个提高效率不大 2. class的介绍 对于第三点&#xff1a;首先类只会加载一次&#xff0c;得到的class的对象&#xff0c;也只有一…...

编程日记 2024/2/13 8:51:57

【MySQL】操作库 —— 库的操作 -- 详解

一、增删数据库 1、创建数据库 create database db_name; 本质就是在 /var/lib/mysql 创建一个目录。 说明&#xff1a; 大写的表示关键字。[ ] 是可选项。CHARACTER SET&#xff1a;指定数据库采用的字符集。COLLATE&#xff1a;指定数据库字符集的校验规则。 2、数据库删除…...

编程日记 2024/2/13 8:50:56

Rust安装——Win10

安装步骤 1、下载RUSTUP-INIT.EXE&#xff08;64-BIT&#xff09; 2、由于国外源下载依赖太慢&#xff0c;因此建议增加win10环境变量配置国内源&#xff0c;增加RUSTUP_DIST_SERVER、RUSTUP_UPDATE_ROOT环境变量即可 RUSTUP_DIST_SERVER随便选择其中的一个源就行&#xff0c;…...

编程日记 2024/2/13 8:46:51

【教学类-46-07】20240212立体春字1.0

背景需求&#xff1a; 在南浔古镇的非遗文化馆里看到一个新年活动折纸——立体春字&#xff0c; 我记得这个就是一个双三角结构折纸&#xff0c;完全可以用15*15的手工纸给孩子们做一套。 折纸教程 双三角折法 【“鼠”你有才】纸艺教学 剪纸——立体春字&#xff08;2月23日…...

编程日记 2024/2/13 8:45:50

Python语言例题集（003）

#!/usr/bin/python3 #猜数字 import random secretNumberrandom.randint(1,20) print(‘我想了一个1到20间的整数&#xff0c;你能猜出来吗&#xff1f;’) for guessesTaken in range(1,7): print(‘猜一下&#xff01;’) guessint(input()) if guess<secretNumber: pr…...

编程日记 2024/2/13 8:43:47

UE5 播放本地MP3、MP4

1.创建一个媒体播放器 2.如创建视频&#xff0c;勾选。 它会多一个媒体纹理给你 3.1 设置音频 在一个actor上添加“媒体音频组件” “音频媒体播放器”赋值给它 3.2播放音频 添加一个音频媒体播放器变量&#xff0c; 赋值 地址使用绝对地址 4.1设置视频 UI上创建一个imag…...

编程日记 2024/2/13 8:39:44

NLP_“预训练+微调大模型”模式和Prompt/Instruct模式的异同

文章目录 “预训练微调大模型”的模式以提示/指令模式直接使用大模型“预训练微调大模型”模式和Prompt/Instruct模式的异同小结 “预训练微调大模型”的模式 经过预训练的大模型所习得的语义信息和所蕴含的语言知识&#xff0c;很容易向下游任务迁移。NLP应用人员可以根据自己…...

编程日记 2024/2/13 8:38:43

普通人应该如何使用GPT

现在GPT4推出的GPTs&#xff0c;包含了各个行业方向&#xff0c;比如DALL&#xff08;绘图&#xff09;、Diagrams&#xff08;图标、流程图&#xff09;、KAYAK&#xff08;航旅助手&#xff09;、Murder Mystery Mayhem&#xff08;侦探扮演&#xff09;、Canva&#xff08;设…...

编程日记 2024/2/13 8:36:40

pycharm像jupyter一样在控制台查看后台变量

更新下&#xff1a;这个一劳永逸不用一个一个改 https://blog.csdn.net/Onlyone_1314/article/details/109347481 右上角运行...

编程日记 2024/2/13 8:31:36

Ansible command命令模块 这个模块可以直接在远程主机上执行命令，并将结果返回本主机。

目录 参数介绍练习环境配置主机清单配置无密码链接ping模块 command 命令模块也可以用来安装点东西看个路径 command 指定目录来 指定命令 参数介绍 chdir　　　 # 在执行命令之前&#xff0c;先切换到该目录 executable # 切换shell来执行命令&#xff0c;需要使用命令的绝对…...

编程日记 2024/2/13 8:28:33

C语言-3

定义指针 /*指针的概念:1.为了方便访问内存中的内容&#xff0c;给每一个内存单元&#xff0c;进行编号&#xff0c;那么我们称这个编号为地址&#xff0c;也就是指针。2.指针也是一种数据类型&#xff0c;指针变量有自己的内存&#xff0c;里面存储的是地址&#xff0c;也就是…...

编程日记 2024/2/13 8:26:31

Quartus工程的qsf配置约束文件介绍

一、qsf文件概述 qsf&#xff1a;Quartus Setting File&#xff0c;是Quartus工程的配置文件&#xff1b; 包含一个Quartus工程的所有约束&#xff0c;包括工程的软件版本信息、FPGA器件信息、引脚约分配、引脚电平分配&#xff0c;编译约束和用于Classic TimingAnalyzer的时…...

编程日记 2024/2/13 8:25:30

【网工】华为设备命令学习（Telnet)

本次实验AR3为我们实际中远程的路由&#xff0c;AR4模拟我们的设备&#xff0c;最终实现Telnet的远程控制路由&#xff01; 本次笔记主要记录Telnet技术实现原理&#xff0c;后续再补充具体配置代码。 Telnet协议是TCP/IP协议族中的一员&#xff0c;是Internet远程登录服务的…...

编程日记 2024/2/13 8:24:29

搜索专项---最短路模型

文章目录 迷宫问题武士风度的牛抓住那头牛 一、迷宫问题OJ链接 本题思路:只需要记录各个点是有哪个点走过来的&#xff0c;就能递推得出路径。记录前驱假设从 1,1 这个点向下走到了2, 1&#xff0c;则将2,1这个点的前驱记为1,1。这样&#xff0c;将整张地图 bfs 后&#xff0c…...

编程日记 2024/2/13 8:19:24

安装PostgreSQL和PostGIS

安装环境 Windows 2019 Standard Server 安装PostgreSQL 安装PostgreSQL 16 安装PostGIS 用PostgreSQL 16对应的PostGIS https://download.osgeo.org/postgis/windows/pg16/ https://download.osgeo.org/postgis/windows/pg16/postgis-bundle-pg16x64-setup-3.4.1-1.exe 创建…...

编程日记 2024/2/13 8:18:23

MySQL-----DCL基础操作

▶ DCL简介 DCL英文全称是Data ControlLanguage(数据控制语言)&#xff0c;用来管理数据库用户、控制数据库的访问权限。 DCL--管理用户 ▶ 查询用户 use mysql; select * from user; ▶ 创建用户 ▶ 语法 create user 用户名主机名 identified by 密码 设置为在任意主机上访问…...

编程日记 2024/2/13 8:14:19

AI智能体任务编排框架：从概念到实战的Mission Control指南

1. 项目概述&#xff1a;为AI智能体打造一个“任务控制中心”最近在折腾AI智能体&#xff08;Agent&#xff09;的开发&#xff0c;发现一个挺普遍的问题&#xff1a;当你想让多个智能体协同工作&#xff0c;或者想让单个智能体执行一系列复杂、有依赖关系的任务时&#xff0c;…...

编程新知 2026/5/17 10:30:32

解锁端侧智能：基于BigDL-LLM与Qwen-1.8B-Chat的CPU高效推理实践

1. 为什么要在CPU上部署大模型&#xff1f; 最近两年大模型技术发展迅猛&#xff0c;但大多数应用都依赖昂贵的GPU服务器。我在实际项目中发现&#xff0c;很多中小企业和个人开发者其实更需要能在普通电脑上运行的轻量化方案。这就是为什么基于CPU的大模型部署方案变得越来越…...

编程新知 2026/5/17 10:26:23

Token工厂：从“卖流量”到“卖Token”：中国移动砸百亿建Token生态，三大运营商的AI战争升级，阿里，百度，华为，字节跟进

5月9日&#xff0c;2026移动云大会上&#xff0c;中国移动市场经营部总经理邱宝华扔出一个新概念——"Token运营体系"。未来3-5年&#xff0c;中国移动将投入百亿级Token生态资源&#xff0c;建设千亿级算力基础设施&#xff0c;携手共创万亿级AI产业价值。"百亿…...

编程新知 2026/5/17 8:25:57

XHS-Downloader：小红书内容采集与管理的全栈解决方案

XHS-Downloader&#xff1a;小红书内容采集与管理的全栈解决方案 【免费下载链接】XHS-Downloader 小红书&#xff08;XiaoHongShu、RedNote&#xff09;链接提取/作品采集工具&#xff1a;提取账号发布、收藏、点赞、专辑作品链接&#xff1b;提取搜索结果作品、用户链接&…...

编程新知 2026/5/17 7:49:54

猫抓插件：5分钟掌握浏览器资源嗅探的终极武器

猫抓插件&#xff1a;5分钟掌握浏览器资源嗅探的终极武器 【免费下载链接】cat-catch 猫抓 浏览器资源嗅探扩展 / cat-catch Browser Resource Sniffing Extension 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 在数字内容无处不在的今天&#xff0c;你…...

编程新知 2026/5/17 7:33:49

基于RAG的Obsidian智能插件：用AI对话重塑个人知识管理

1. 项目概述&#xff1a;当笔记遇上AI&#xff0c;一个插件如何重塑知识管理最近在折腾我的Obsidian知识库时&#xff0c;发现了一个让我眼前一亮的插件&#xff1a;Smart2Brain。这名字起得挺有意思&#xff0c;“Smart to Brain”&#xff0c;直译过来就是“从智能到大脑”。…...

编程新知 2026/5/17 7:03:50

基于GitHub Actions的自动化代码质量守护：CodeBuddy实战指南

1. 项目概述与核心价值最近在和一些团队做代码评审和协作时&#xff0c;我经常遇到一个痛点&#xff1a;大家写的代码风格各异&#xff0c;注释要么缺失要么过时&#xff0c;一些潜在的安全漏洞和性能问题在提交前很难被系统性地发现。虽然市面上有各种静态分析工具&#xff0c…...

编程新知 2026/5/17 5:23:25

I2C地址冲突全解析：从原理到实战的嵌入式系统设计指南

1. I2C地址&#xff1a;嵌入式系统设计的“门牌号”与“交通规则”如果你玩过单片机或者树莓派&#xff0c;肯定对I2C不陌生。两根线&#xff0c;SDA和SCL&#xff0c;就能挂上一堆传感器、显示屏、扩展芯片&#xff0c;听起来简直是嵌入式开发的“万金油”。但真正上手后&…...

编程新知 2026/5/17 5:15:22

基于RAG与向量数据库的智能信息管理系统（IIMS）架构与实现

1. 项目概述&#xff1a;当AI成为你的“第二大脑”最近在折腾一个挺有意思的项目&#xff0c;叫“IIMS-By-AI”。乍一看这个标题&#xff0c;可能有点摸不着头脑&#xff0c;但拆解一下就能明白它的野心&#xff1a;IntelligentInformationManagementSystem&#xff0c; By AI。…...

编程新知 2026/5/17 4:33:40

MedAgentBench：大模型临床决策能力评估基准详解与应用

1. 项目概述&#xff1a;当大模型成为医疗决策的“实习生” 最近在医疗AI的圈子里&#xff0c;一个名为“MedAgentBench”的开源项目引起了不小的讨论。这个由斯坦福机器学习组&#xff08;Stanford ML Group&#xff09;发布的项目&#xff0c;其核心目标非常明确&#xff1a;…...

编程新知 2026/5/17 4:20:16