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

圆角边框

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>

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

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

相关文章

[杂谈]-2023年实现M2M的技术有哪些?

2023年实现M2M的技术有哪些&#xff1f; 文章目录 2023年实现M2M的技术有哪些&#xff1f;1、寻找连接2、M2M与IoT3、流行的 M2M 协议 在当今的数字世界中&#xff0c;机器对机器 (M2M) 正在迅速成为标准。 M2M 包括使联网设备能够交换数据或信息的任何技术。 它可以是有线或无…

springboot整合elasticsearch使用案例

引入依赖 <dependency><groupId>org.elasticsearch.client</groupId><artifactId>elasticsearch-rest-high-level-client</artifactId> </dependency> 添加注入 import org.apache.http.HttpHost; import org.elasticsearch.client.Res…

项目(智慧教室)第四部分,页面交互功能,WebServer建立与使用,

一。页面构思 1.标题栏 大标题&#xff1a;智慧教室管理系统 小标题&#xff1a;灯光&#xff0c;报警&#xff0c;风扇&#xff0c;温度&#xff0c;湿度&#xff0c;光照 2.样式设计 背景设置。字体设置&#xff08;字体大小&#xff0c;格式&#xff0c;颜色&#xff09; 3.…

【人月神话】深入了解软件工程和项目管理

文章目录 &#x1f468;‍⚖️《人月神话》的主要观点&#x1f468;‍&#x1f3eb;《人月神话》的主要内容&#x1f468;‍&#x1f4bb;作者介绍 &#x1f338;&#x1f338;&#x1f338;&#x1f337;&#x1f337;&#x1f337;&#x1f490;&#x1f490;&#x1f490;&a…

oracle将一个用户的表复制到另一个用户

注&#xff1a;scott用户和scott用户下的源表&#xff08;EMP&#xff09;本身就有&#xff0c;无需另行创建。 GRANT SELECT ON SCOTT.emp TO BI_ODSCREATE TABLE ODS_EMP AS SELECT * FROM SCOTT.emphttp://www.bxcqd.com/news/77615.html SQL语句查询要修改密码的用户…

通过Siri打造智能爬虫助手:捕获与解析结构化数据

在信息时代&#xff0c;我们经常需要从互联网上获取大量的结构化数据。然而&#xff0c;传统的网络爬虫往往需要编写复杂代码和规则来实现数据采集和解析。如今&#xff0c;在苹果公司提供的语音助手Siri中有一个强大功能可以帮助我们轻松完成这项任务——通过使用自定义指令、…

OpenCV 05(图像的算术与位运算)

一、图像的算术运算 1.1 图像的加法运算 - add opencv使用add来执行图像的加法运算 图片就是矩阵, 图片的加法运算就是矩阵的加法运算, 这就要求加法运算的两张图shape必须是相同的. import cv2 import numpy as npcat cv2.imread(D:\\3-project\\zyj\\pythonCNN\\pic\\c…

libbpf-bootstrap安卓aarch64适配交叉编译

1.为什么移植 疑惑 起初我也认为&#xff0c;像libbpf-bootstrap这样在ebpf程序开发中很常用的框架&#xff0c;理应支持不同架构的交叉编译。尤其是向内核态的ebpf程序本身就是直接通过clang的-target btf直接生成字节码&#xff0c;各个内核上的ebpf虚拟机大同小异&#xf…

音频——I2S DSP 模式(五)

I2S 基本概念飞利浦(I2S)标准模式左(MSB)对齐标准模式右(LSB)对齐标准模式DSP 模式TDM 模式 文章目录 DSP formatDSP A时序图逻辑分析仪抓包 DSP B时序图逻辑分析仪抓包 DSP format DSP/PCMmode 分为 Mode-A 和 Mode-B 共 2 种模式。不同芯⽚有的称为 PCM mode 有的称为 DSP m…

UG二次开发 向量叉乘 UF_VEC3_cross

文章作者:里海 来源网站:王牌飞行员_里海_里海NX二次开发3000例,里海BlockUI专栏,C\C++-CSDN博客 简介: UG二次开发 向量叉乘 UF_VEC3_cross,xyz三个向量已知2个求另外1个。 效果: 代码: #include "me.hpp"void ufusr(char* param, int* retcode, int paramLe…

数据结构与算法学习(day4)——解决实际问题

前言 在本章的学习此前&#xff0c;需要复习前三章的内容&#xff0c;每个算法都动手敲一遍解题。宁愿学慢一点&#xff0c;也要对每个算法掌握基本的理解&#xff01; 前面我们学习了简化版桶排序、冒泡排序和快速排序三种算法&#xff0c;今天我们来实践一下前面的三种算法。…

C# OpenVinoSharp PP-TinyPose 人体姿态识别

效果 项目 部分代码 using OpenCvSharp; using OpenCvSharp.Extensions; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms;name…

机器学习——支持向量机(SVM)

机器学习——支持向量机&#xff08;SVM&#xff09; 文章目录 前言一、SVM算法原理1.1. SVM介绍1.2. 核函数&#xff08;Kernel&#xff09;介绍1.3. 算法和核函数的选择1.4. 算法步骤1.5. 分类和回归的选择 二、代码实现&#xff08;SVM&#xff09;1. SVR&#xff08;回归&a…

【矩阵分解】PCA - 主成分分析中的数学原理

前言 本文主要对PCA主成分分析中的数学原理进行介绍&#xff0c;将不涉及或很少涉及代码实现或应用&#xff0c;阅读前请确保已了解基本的机器学习相关知识。 文章概述 PCA主成分分析属于矩阵分解算法中的入门算法&#xff0c;通过分解特征矩阵来实现降维。 本文主要内容&a…

硬件学习件Cadence day13 PCB设计中一些设置, 铜皮到钻孔的距离设置, 差分线的设置,板层信息表

1. 设置铺铜中铜皮到钻口&#xff0c;连线的距离。 1. 打开设置界面 2. 设计界面 调整到 铜皮设置界面 2. 高速线的设置 &#xff08;差分对传输线的设置&#xff09; 1. 打开设置界面 2. 来到 差分线设置界面 3. 把界面往右看&#xff0c; 设置差分线的之间距离&#xff0c;…

(二十四)大数据实战——Flume数据流监控之Ganglia的安装与部署

前言 本节内容我们主要介绍一下Flume数据流的监控工具Ganglia。Ganglia是一个开源的分布式系统性能监控工具。它被设计用于监视大规模的计算机群集&#xff08;包括集群、网格和云环境&#xff09;&#xff0c;以便收集和展示系统和应用程序的性能数据。Ganglia 可以轻松地扩展…

【多线程】线程安全 问题

线程安全 问题 一. 线程不安全的典型例子二. 线程安全的概念三. 线程不安全的原因1. 线程调度的抢占式执行2. 修改共享数据3. 原子性4. 内存可见性5. 指令重排序 一. 线程不安全的典型例子 class ThreadDemo {static class Counter {public int count 0;void increase() {cou…

3D点云测量:计算三个平面的交点

文章目录 0. 测试效果1. 基本内容文章目录:3D视觉测量目录0. 测试效果 1. 基本内容 计算三个平面的交点需要找到满足所有三个平面方程的点。三个平面通常由它们的法向量和通过它们的点(或参数形式的方程)来定义。以下是计算三个平面的交点的一般步骤: 假设有三个平面,分别…

MyBatis-Plus排除不必要的字段

查询学生信息排除年龄列表 &#x1f4da;&#x1f50d; 使用MyBatis-Plus排除某些字段。如果你想要进行查询&#xff0c;但又不需要包含某些字段&#xff0c;那么这个功能将非常适合你。&#x1f50d;&#x1f393;&#x1f4dd; 1. 学生信息查询-排除年龄列表 在使用 MyBat…

【Cisco Packet Tracer】管理方式,命令,接口trunk,VLAN

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …