前段css中border-radius的简单使用

2024-04-18 20:04

本文主要是介绍前段css中border-radius的简单使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前段css中border-radius的使用

  • 一、前言
  • 二、border-radius语法
  • 三、border-radius的模型例子
    • 1.源码1
    • 2.源码1效果截图
  • 四、border-radius的动画效果(动态交互)
    • 1.源码2
    • 2.源码2显示效果
  • 五、结语
  • 六、定位日期

一、前言

在CSS中,我们常用border-radius 属性创建圆角边框,可以单独设定每一个角的半径,或者统一设置所有角的半径。比如原本一个长方形模型,我们不想要它的直角效果,而是想使用圆角属性效果,这时候就用到border-radius了。当然看字面意思border-radius(边界-周围)也不难理解它的功能和意思。
border-radius 还可以被动画处理,创建平滑的形状变换效果。这里会添加一个hover(悬停)状态,即我们鼠标悬停在我们设定的组件上时,让组件产生动画效果,详看后边例子。

二、border-radius语法

border-radius 的语法灵活,允许从简单到复杂的多种设置方式:

/* 只有一个值,表示4个角为相同的圆角半径 */
border-radius: 5px;/* 有四个值,分别指示左上角,右上角,右下角,左下角的圆角半径 */
border-radius:5px 10px 15px 20px;/* 有二个值,则表示水平和垂直来创建圆角半径 */
border-radius: 10px 20px;/* 有三个值,指示左上角,右上角和左下角(这两个角共享同一半径),右下角的圆角半径 */
border-radius: 10px 20px 30px;/* 还可以使用百分比,这关联到元素的尺寸,比如生成圆可以用此方法 */
border-radius: 50%;

三、border-radius的模型例子

以下源码1将设置一个具有不同圆角的矩形。

1.源码1

<!DOCTYPE html>
<!-- 定义文档类型为HTML5,确保浏览器以最标准的模式渲染页面 -->
<html lang="en"> <!-- 设置文档的语言为英语 -->
<head><style>/* 定义样式规则 */.box {width: 200px; /* 设置div的宽度为200像素 */height: 100px; /* 设置div的高度为100像素 */background-color: blue; /* 设置div的背景颜色为蓝色 *//* 圆角设置,分别为左上角、右上角、右下角、左下角 */border-radius: 25px 50px 75px 100px; }</style>
</head>
<body><!-- 页面主体内容 --><div class="box"></div> <!-- 创建一个class为box的div元素 -->
</body>
</html>

2.源码1效果截图

在这里插入图片描述

四、border-radius的动画效果(动态交互)

关键语句或词:

  • transition(过渡)
  • transition: border-radius 0.3s ease; /* 定义边框圆角变化的过渡效果,持续0.3秒,使用ease缓动函数 */
    这里用于定义过渡期间动画的速度曲线。
  • hover给模型添加一个鼠标悬停效果,悬停在模型上时,进行相关的变换方法。这里则为变化成圆。

1.源码2

如下源码2中,元素在鼠标悬停时的圆角过渡效果被描述,展示了CSS transition 属性的应用。通过源码2,可以看到border-radius属性不仅改变了元素的视觉呈现,而且通过transition:hover伪类增加了动画效果.

<!DOCTYPE html> <!-- 定义文档类型为 HTML5,确保页面以标准模式渲染 -->
<html lang="en"> <!-- HTML元素,设置页面内容的语言为英语 --><head><style>/* 定义内部CSS样式 */.box {width: 200px;             /* 设置元素宽度为200像素 */height: 200px;            /* 设置元素高度为200像素 */background-color: green;  /* 设置元素背景颜色为绿色 */border-radius: 20px;      /* 初始圆角为20像素 */transition: border-radius 0.3s ease; /* 定义边框圆角变化的过渡效果,持续0.3秒,使用ease缓动函数 */}.box:hover {border-radius: 50%;       /* 当鼠标悬停时,border-radius变为50%,使得元素成为圆形 */}</style>
</head><body><div class="box"></div> <!-- 页面主体中包含一个class为box的div元素,应用了上面定义的样式 -->
</body></html>

2.源码2显示效果

鼠标悬停变圆

当鼠标未悬停在模型组件上时,半径为20px的圆角正方形。
在这里插入图片描述
鼠标悬停在模型组件上,会缓慢变为圆。
在这里插入图片描述

五、结语

笔者在学习前段知识的过程中发现,如果只跟着有教程的视频或书籍学习,一笔带过记忆可能没那么深刻。如果可以通过自己的见解和总结去编写博文,那么知识的印象会更深刻一些,因为不会的自己肯定是要去理解和寻求答案的,跟着别人的步伐难有自己的见解与不足。

六、定位日期

2024.4.18
15:03

这篇关于前段css中border-radius的简单使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/915728

相关文章

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

C 语言中enum枚举的定义和使用小结

《C语言中enum枚举的定义和使用小结》在C语言里,enum(枚举)是一种用户自定义的数据类型,它能够让你创建一组具名的整数常量,下面我会从定义、使用、特性等方面详细介绍enum,感兴趣的朋友一起看... 目录1、引言2、基本定义3、定义枚举变量4、自定义枚举常量的值5、枚举与switch语句结合使用6、枚

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

使用Python实现图像LBP特征提取的操作方法

《使用Python实现图像LBP特征提取的操作方法》LBP特征叫做局部二值模式,常用于纹理特征提取,并在纹理分类中具有较强的区分能力,本文给大家介绍了如何使用Python实现图像LBP特征提取的操作方... 目录一、LBP特征介绍二、LBP特征描述三、一些改进版本的LBP1.圆形LBP算子2.旋转不变的LB

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H

Python中__init__方法使用的深度解析

《Python中__init__方法使用的深度解析》在Python的面向对象编程(OOP)体系中,__init__方法如同建造房屋时的奠基仪式——它定义了对象诞生时的初始状态,下面我们就来深入了解下_... 目录一、__init__的基因图谱二、初始化过程的魔法时刻继承链中的初始化顺序self参数的奥秘默认

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab