css椭圆，椭圆边框-程序员宅基地

技术标签： css Html css3

border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个圆与边框的交集形成圆角效果。

css设置椭圆的方法：

1、给元素添加“ {width:宽度值;height:高度值;}”样式，将元素设置为矩形；

2、给矩形元素添加“ {border-radius:100%;}”圆角样式将其设置为椭圆即可。这种情况如果设置的高和宽是相等的，则图像为圆。

border-radius 属性是一个最多可指定四个 border-*-radius 属性的复合属性
每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。

如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

下面展示代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
#example1 {
      
    border-radius: 50px/15px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#example2 {
      
    border-radius: 40px/50px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#example3 {
      
    border-radius: 100%;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 200px;
} 
#example4 {
      
    border-radius: 50px 10px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 200px;
} 
#example5 {
      
    border-radius: 10px 50px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 200px;
} 
</style>
</head>
<body>

<p id="example1"></p>

<p id="example2"></p>

<p id="example3"></p>

<p id="example4"></p>

<p id="example5"></p>

</body>
</html>

在这里插入图片描述

例一到例五结果如图所示主要就是了解前面所叙述的border-radius再加上练习即可。

本文链接：https://blog.csdn.net/weixin_52450702/article/details/124109426

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Hibernate入门（IDEA下自动生成映射文件及实体类）_idea生成hibernate映射关系项目-程序员宅基地

文章浏览阅读5k次，点赞2次，收藏15次。1.Hibernate开发步骤1.创建Hibernate配置文件2.创建持久化类3.创建对象-关系映射文件4.通过Hibernate API编写访问数据库的代码2.创建一个hibernate项目（IntelliJ IDEA下演示）后续需要连接数据库，手动导入这两个包3.配置文件修改hibernate.cfg.xml<?xml version='1.0..._idea生成hibernate映射关系项目

查找算法---二分查找(递归方式)_对从大到小顺序的数据进行二分查找,并要求使用递归函数实现该二分查找,如果找到则-程序员宅基地

文章浏览阅读3k次，点赞3次，收藏13次。二分查找前提条件我们的二分查找必须是在有序数组中查找无论是从小到大还是从大到小题目请对一个有序数组进行二分查找{1, 8,10,89,1000,1234}，输入一个数看看该数组是否在此数，姐出下标，如果没有就提示没有这个数”。思路我们这次的二分查找会用到递归的思想，当然也有非递归的方式，我是分开来学习了1.首先确定数组的中间下标mid mid = (left+ right)/22.让需要查找的数findValue和我们的arr[mid]比较如果findValue&g_对从大到小顺序的数据进行二分查找,并要求使用递归函数实现该二分查找,如果找到则

DHCP协议分析与配置及跨网段分配ip地址_dhcp服务器是如何判定为工作站分配哪个网段的ip地址的?-程序员宅基地

文章浏览阅读2.5k次，点赞4次，收藏14次。DHCP协议分析一、概述Dynamic Host Configuration Protocol，动态主机配置协议，主机通过DHCP获取ip地址，网关地址、DNS地址等信息1. 报文类型2. 地址池接口地址池：会给连接在该接口下的本网段主机分配ip地址全局地址池：给所有主机分配ip地址接口地址池优先级高于全局地址池3. 工作原理主机发送广播报文找DHCP服务器服务..._dhcp服务器是如何判定为工作站分配哪个网段的ip地址的?

CUDA编译（一）---使用nvcc编译cuda_nvcc编译cuda程序-程序员宅基地

文章浏览阅读3.4w次，点赞17次，收藏57次。CUDA编译（一）—使用nvcc编译cudanvcc介绍示例nvcc介绍nvcc是编译cuda程序的编译器，CDUA C是在C语言上的扩展，所以它依赖C编译器（C编译器在window下是cl.exe，在Linux下是gcc）。因此我们编译CUDA程序必须依靠编译器nvcc。其实，nvcc编译cuda程序和g++编译c++程序是差不多的。在我的其它博客中也写了有关g++编译..._nvcc编译cuda程序

spring bootstrap table 表格创建_springboot table编辑-程序员宅基地

文章浏览阅读827次。前台表格插件多种样，以前用过datatable以及gridtable，这次想要尝试一个新的，就选择了bootstrap table，主要是界面定了想要用bootstrap设计界面，所以就选择了这个，bootstrap table 官网为http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/，里面对表格各种问题都有详细描述。好了，不多..._springboot table编辑

福建师范大学计算机科学与技术学院,福建师范大学计算机科学与技术学院.docx...-程序员宅基地

文章浏览阅读195次。福建师范大学计算机科学与技术学院1、-只能在总账模块里可以制作财务凭证。()--A.　√ B.　×　　答案：×2、-系统初始化工作，可为U8系统内模块提供基础应用的公共档案。()--A.　√ B.　×　　答案：√3、-新建的末级科目辅助项类型必须和上级科目一致。()--A.　√ B.　×　　答案：×4、-项目大类定义中项目栏目是固定的，不能新增栏目。()--A.　√ B.　×　　答案：×5、-凭证...