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

目录

背景属性设置

圆角矩形


背景属性设置

背景颜色,在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;  /*按 左上角-右上角-右下角-左下角 的顺序

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

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

相关文章

推荐一款开源的跨平台划词翻译和OCR翻译软件:Pot

Pot简介 一款开源的跨平台划词翻译和OCR翻译软件 下载安装指南 根据你的机器型号下载对应版本&#xff0c;下载完成后双击安装即可。 使用教程 Pot具体功能如下&#xff1a; 划词翻译输入翻译外部调用鼠标选中需要翻译的文本&#xff0c;按下设置的划词翻译快捷键即可按下输…

跨域--浏览器与服务器通信过程中出现跨域问题

一、跨域产生的原因 浏览器和服务器的协议、域名、端口号只要有一个不一致&#xff0c;就会产生跨域错误。 服务器和服务器进行数据通信时&#xff0c;如果三要素不一致&#xff0c;也不会产生跨域错误。 跨域的限制是浏览器的限制&#xff0c;与服务器无关。 跨域是一个安全策…

HiveSQL——共同使用ip的用户检测问题【自关联问题】

注&#xff1a;参考文章&#xff1a; SQL 之共同使用ip用户检测问题【自关联问题】-HQL面试题48【拼多多面试题】_hive sql 自关联-CSDN博客文章浏览阅读810次。0 问题描述create table log( uid char(10), ip char(15), time timestamp);insert into log valuesinsert into l…

Gradle IDEA 乱码

文章目录 环境代码测试结果配置 JAVA_TOOL_OPTIONS配置 build.gradle.kts配置 idea64.exe.vmoptions无配置 总结问题链接 环境 Java 环境 java version "21.0.2" 2024-01-16 LTS Java(TM) SE Runtime Environment (build 21.0.213-LTS-58) Java HotSpot(TM) 64-Bit…

MySQL进阶查询篇(7)-触发器的创建和使用

MySQL数据库触发器的创建和使用 触发器(Trigger)是MySQL数据库中非常强大且有用的功能&#xff0c;它可以在特定的数据库事件发生时自动执行一段预定义的代码。触发器可以用于实现数据完整性约束、自动化业务逻辑、审计日志等功能。本文将介绍MySQL数据库中触发器的创建和使用…

秒杀相关问题解决

秒杀 超卖问题 如下,我们先来复现问题,抢购秒杀券的代码逻辑也是很简单, 先判断优惠券是否开始了,是的化,判断库存是否充足,如果是的化,扣减库存,最后创建订单 如下是代码 Override Transactional public Result seckillVoucher(Long voucherId) {//1.查询优惠券SeckillVo…

平台工程是 FinOps 的“黄金路径”

云成本催生出了各种工具集。这些工具集目前主要用于现代 IT 堆栈&#xff0c;以加强资源、减少浪费、优化已确定的效率&#xff0c;并在最高、最广和最广泛的层面上监控系统的运行状况。 在云计算环境中&#xff0c;MLOps 实践的兴起旨在使软件工程与运维工程保持一致&#xff…

Linux 命令行的世界 :3.探索操作系统

既然我们已经知道了如何在文件系统中跳转&#xff0c;是时候开始 Linux 操作系统之旅了。然而在开始之前&#xff0c;我们先学习一些对研究Linux 系统有帮助的命令。 ls —列出目录内容 file —确定文件类型 less —浏览文件内容 ls 可能是用户最常使用的命令了&#xff0c;这…

double精度丢失问题

前言 在Java中&#xff0c;使用double类型时可能会遇到精度丢失的问题。这是由于double类型是一种浮点数类型&#xff0c;在表示某些小数时可能会存在精度损失。这种情况通常是由于浮点数的二进制表示法无法准确地表示某些十进制小数&#xff0c;导致精度丢失。 为了避免这种问…

C#使用哈希表对XML文件进行查询

目录 一、使用的方法 1.Hashtable哈希表 2.Hashtable哈希表的Add方法 &#xff08;1&#xff09;定义 &#xff08;2&#xff09;示例 3.XML文件的使用 二、实例 1.源码 2.生成效果 可以通过使用哈希表可以对XML文件进行查询。 一、使用的方法 1.Hashtable哈希表…

MySQL基础查询篇(9)-数学函数在查询中的应用

在MySQL数据库中&#xff0c;数学函数在查询中扮演了非常重要的角色。这些函数可以帮助我们进行各种数学计算和处理&#xff0c;使得我们能够更有效地处理和分析数据。本文将介绍一些常用的MySQL数学函数及其在查询中的应用。 1. ABS函数 ABS函数用于返回一个数值的绝对值。在…

证明之黄金分割比的无理性

黄金分割比的无理性 “黄金分割比的神奇之处&#xff1a;视觉化证明与数学的魅力” 人们在学习高等数学时&#xff0c;走到一个证明的结尾处&#xff0c;通常会经历这样的思考&#xff1a;“我理解每一行是怎样由前一行得到的&#xff0c;但是我却不明白为什么这个定理是正确…

【北邮鲁鹏老师计算机视觉课程笔记】01 introduction

1 生活中的计算机视觉 生活中的各种计算机视觉识别系统已经广泛地应用起来了。 2 计算机视觉与其他学科的关系 认知科学和神经科学是研究人类视觉系统的&#xff0c;如果能把人类视觉系统学习得更好&#xff0c;可以迁移到计算机视觉。是计算机视觉的理论基础。 算法、系统、框…

Sodinokibi(REvil)勒索病毒最新变种,攻击Linux平台

前言 国外安全研究人员爆光了一个Linux平台上疑似Sodinokibi勒索病毒家族最新样本&#xff0c;如下所示&#xff1a; Sodinokibi(REvil)勒索病毒的详细分析以及资料可以参考笔者之前的一些文章&#xff0c;这款勒索病毒黑客组织此前一直以Windows平台为主要的攻击目标&#xf…

c语言--指针运算

目录 一、指针-整数二、指针-指针2.1条件2.2两个指针指向同一块空间代码2.2.1运行结果 2.3两个指针指向不同块空间代码2.3.1运行结果 2.4总结 三、指针的关系运算3.1代码3.1.1运行结果3.1.2分析 一、指针整数 用数组举例&#xff1a; 因为数组在内存中是连续存放的&#xff0c…

Git版本与分支

目录 一、Git 二、配置SSH 1.什么是SSH Key 2.配置SSH Key 三、分支 1.为什么要使用分支 2.四个环境及特点 3.实践操作 1.创建分支 2.查看分支 3.切换分支 4.合并分支 5.删除分支 6.重命名分支 7.推送远程分支 8.拉取远程分支 9.克隆指定分支 四、版本 1.什…

2 scala集合-元组和列表

1 元组 元组也是可以存放不同数据类型的元素&#xff0c;并且最重要的是&#xff0c;元组中的元素是不可变的。 例如&#xff0c;定义一个元组&#xff0c;包含字符串 hello&#xff0c;数字 20。如果试图把数字 20 修改为 1&#xff0c;则会报错。 scala> var a ("…

IOS破解软件安装教程

对于很多iOS用户而言&#xff0c;获取软件的途径显得较为单一&#xff0c;必须通过App Store进行下载安装。 这样的限制&#xff0c;时常让人羡慕安卓系统那些自由下载各类版本软件的便捷。 心中不禁生出疑问&#xff1a;难道iOS世界里&#xff0c;就不存在所谓的“破解版”软件…

Python 字符串模块

Python字符串模块 它是一个内置模块&#xff0c;我们在使用其常量和类之前必须导入它。 字符串模块常量 让我们看看字符串模块中定义的常量。 import string# 字符串模块常量 print(string.ascii_letters) print(string.ascii_lowercase) print(string.ascii_uppercase) pr…

【机房预约系统(C++版)】

一、机房预约系统需求 1.1、系统简介 学校现有几个规格不同的机房&#xff0c;由于使用时经常出现“撞车“现象,现开发一套机房预约系统&#xff0c;解决这一问题。 1.2、身份简介 分别有三种身份使用该程序学生代表:申请使用机房教师:审核学生的预约申请管理员:给学生、教…