CSS3新增边框样式

news2024/11/13 9:48:59

边框样式

概念:在CSS3中,针对元素边框增加了丰富的修饰属性。

常见的边框样式属性有以下

属性说明
border-radius圆角效果
box-shadow边框阴影
border-image边框背景

border-radius属性

概念:border-radius属性可以为元素添加圆角效果

语法:

border-radius:参数1/参数2;

参数

  • 参数1:表示圆角的水平半径
  • 参数2:表示圆角的垂直半径

border-radius属性跟border、padding、margin等属性相似。border-radius属性同样遵循着值复制的原则,可以为其水平半径和垂直半径设置1~4个参数值,用来表示四角圆角半径的大小

  • 当只有1个参数值时,该参数值代表4个角的圆角半径
  • 当设置2个参数值时,第1个参数值代表左上右下圆角半径,第2个参数值代表右上左下圆角半径
  • 当设置3个参数值时,第1个参数值代表左上圆角半径,第2个参数值代表右上左下圆角半径,第3个参数值代表右下圆角半径
  • 当设置4个参数值时,第1个参数值代表左上圆角半径,第2个参数值代表右上圆角半径,第3个参数值代表右下圆角半径,第4个参数值代表左上圆角半径

注意:如果参数值2省略,则会默认其参数值等于参数2的参数值。此时圆角的水平半径和垂直半径相等

在这里插入图片描述

规律:这里只要按照“左上角,右上角,右下角,左下角"顺时针来记忆就很容易

实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				display:inline-block;
				width:100px;
				height:100px;
				margin:10px;
				background-color:blueviolet;
			}
			.a{
				border-radius:20px;
			}
			.b{
				border-radius:20px 30px;
			}
			.c{
				border-radius:20px 30px 50px;
			}
			.d{
				border-radius:20px 30px 50px 10px;
			}
			.e{
				border-radius:50%;
			}
			.f{
				border-radius:20% 40%;
			}
		</style>
	</head>
	<body>
		<div class="a"></div>
		<div class="b"></div>
		<div class="c"></div>
		<div class="d"></div>
		<div class="e"></div>
		<div class="f"></div>
	</body>
</html>

运行结果
在这里插入图片描述

box-shadow属性

概念:box-shadow属性可以为元素添加阴影效果

语法:

box-shadow:x-offset y-offset blur spread color style;

常用属性

属性值说明
x-offset必选值,表示元素水平阴影的偏移距离,可为负值。由于CSS3采用的是W3C坐标系,因此x-offset取值为正时,向右偏移,取值为负时,向左偏移
y-offset必选值,表示元素垂直阴影的偏移距离,可为负值。由于CSS3采用的是W3C坐标系,因此y-offset取值为正时,向下偏移,取值为负时,向上偏移
blur可选值,表示阴影的模糊半径,只能为正值
spread可选值,表示阴影的扩展半径,只能为正值
color可选值,表示阴影颜色,默认为灰色
style可选值,表示是外阴影还是内阴影,默认为外阴影

多个阴影属性

box-shadow属性设置多个阴影效果,用英文逗号(,)隔开

当设置多个阴影值时,最先写的阴影会显示在最顶层。层叠顺序是从上到下,第一个阴影在最上层

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>box-shadow阴影效果</title>
		<style>
			div{
				display:inline-block;
				width:100px;
				height:100px;
				margin:10px;
				background-color:blueviolet;
			}
			.a{
				box-shadow:10px 8px;
			}
			.b{
				/* 定义阴影的模糊半径 */
				box-shadow:10px 8px 5px;
			}
			.c{
				/* 定义阴影的扩展半径 */
				box-shadow:10px 8px 5px 8px;
			}
			.d{
				/* 定义阴影颜色 */
				box-shadow:10px 8px 5px 8px burlywood;
			}
			.e{
				/* 定义阴影类型 */
				box-shadow:10px 8px 5px 8px burlywood inset;
			}
			.f{
				/* 定义多个阴影 */
				box-shadow:10px 8px 5px 8px burlywood ,10px -8px 5px 8px aqua  inset;
			}
		</style>
	</head>
	<body>
		<div class="a"></div>
		<div class="b"></div>
		<div class="c"></div>
		<div class="d"></div>
		<div class="e"></div>
		<div class="f"></div>
	</body>
</html>

运行结果
在这里插入图片描述

border-image属性

概念:border-image属性用来为边框添加背景图片

语法:

border-image:url() slice/width repeat;

属性值

  • url():定义图片的路径
  • slice:定义图片边框4条边的切割宽度,依次为上边、右边、下边、左边(顺时针)
  • width:定义边框宽度
  • repeat:定义背景图片的平铺方式
    • repeat:默认值,边框图像会在水平和垂直方向上循环平铺,直到填满边框区域。
    • space:边框图像在水平和垂直方向上均匀分布,如果边框图像的尺寸不能被平铺的尺寸整除,则会忽略较小的部分。
    • round:边框图像在水平和垂直方向上循环平铺,如果某个方向上的平铺不能完整显示,则会缩小图像以适应平铺的尺寸。
    • stretch:边框图像将会被拉伸以填满整个边框区域,不考虑图像的原始比例。

注意:元素设置了border-image属性,该元素还需要设置border属性。这样border-image属性才会起作用

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				display:inline-block;
				width:200px;
				height:100px;
				border:10px solid bisque;
				margin:20px;
				
			}
			.a{
				border-image:url('./image/border.png') 22 repeat;
			}
			.b{
				border-image:url('./image/border.png') 50%/22 repeat;
			}
		</style>
	</head>
	<body>
		<div class="a"></div>
		<div class="b"></div>
	</body>
</html>

运行结果
在这里插入图片描述

border-image是一个复合属性,有以下属性

属性说明
border-image-source定义图片的路径
border-image-slice定义如何裁切边框图像
border-image-width定义边框宽度
border-image-outset定义边框图片向盒子模型外部延伸的距离
border-image-repeat定义背景图片的平铺方式

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>border-image复合属性</title>
		<style>
			div{
				display:inline-block;
				width:200px;
				height:100px;
				border:10px solid bisque;
				margin:20px;
				font-size:20px;
				text-align:center;
				line-height:100px;
				
			}
			.a{
				/* 设置边框图片路径 */
				border-image-source:url('./image/border.png');
				/* 设置边框裁切图像 */
				border-image-slice:33%;
				/* 设置边框宽度 */
				border-width:40px;
				/* 设置边框图片区域超出边框量 */
				border-image-outset:0;
				/* 设置图片显示方式为“repeat” */
				border-image-repeat:repeat;
			}
			.b{
				border-image-source:url('./image/border.png');
				border-image-slice:35%;
				border-width:40px;
			border-image-outset:0;
				/* 设置图片显示方式为“space” */
				border-image-repeat:space;
			}
			.c{
				border-image-source:url('./image/border.png');
				border-image-slice:38%;
				border-width:40px;
				border-image-outset:0;
				/* 设置图片显示方式为“round” */
				border-image-repeat:round;
			}
			.d{
				border-image-source:url('./image/border.png');
				border-image-slice:40%;
				border-width:40px;
				border-image-outset:0;
				/* 设置图片显示方式为“stretch” */
				border-image-repeat:stretch;
			}
		</style>
	</head>
	<body>
		<div class="a">repeat</div>
		<div class="b">space</div>
		<div class="c">round</div>
		<div class="d">stretch</div>
	</body>
</html>

运行结果
在这里插入图片描述

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

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

相关文章

Spring 基于注解的AOP见解4

5.基于注解的AOP配置 5.1创建工程 5.1.1.pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation&…

tiktoken使用问题——ValueError: too many values to unpack (expected 2)

tiktoken使用问题——ValueError: too many values to unpack (expected 2) 文章目录 tiktoken使用问题——ValueError: too many values to unpack (expected 2)前言一、报错原理是什么&#xff1f;二、解决方法1.设置TIKTOKEN_CACHE_DIR为None2.拉取tiktoken源码&#xff0c;…

CAN转RS232学习笔记

2024-1-9 用keil打开工程后&#xff0c;打开main.c文件 报错&#xff1a;error in include chian 网络解决方法&#xff1a; KEIL消除警告&#xff1a;error in include chain(cmsis_armcc.h):expected identifier or ‘(‘-CSDN博客 上文链接包含的链接&#xff08;套娃&am…

生成式人工智能市场规模、趋势和统计数据(2024-2026)

生成式人工智能市场规模、趋势和统计数据&#xff08;2024-2026&#xff09; 目录 生成式人工智能市场规模、趋势和统计数据&#xff08;2024-2026&#xff09;一、生成式人工智能行业亮点二、生成式人工智能市场规模三、生成式人工智能市场增长预测四、生成式人工智能采用统计…

2023到2024年:前端发展趋势展望

本文探讨了2023年至2024年之间前端领域的发展趋势。我们将关注以下几个方面的变化&#xff1a;无代码/低代码开发的兴起、WebAssembly的广泛应用、跨平台技术的发展、人工智能在前端的应用以及用户体验的不断优化。 随着技术的飞速发展&#xff0c;前端开发在推动互联网与移动应…

软件质量模型-8个特性(功能性、性能效率、兼容性、易用性、可靠性、信息安全性、维护性和可移植性)

软件质量模型 软件质量模型将系统、软件产品属性划分为8个特性&#xff1a;功能性、性能效率、兼容性、易用性、可靠性、信息安全性、维护性和可移植性。

解析游戏开发中的ECS设计模式:实体、组件、系统的完美协同

ECS&#xff08;Entity-Component-System&#xff09;是一种设计模式&#xff0c;通常用于构建和管理具有大量实体和复杂交互的系统&#xff0c;尤其在游戏开发中得到广泛应用。这个模式的核心思想是将系统中的组件、实体和系统进行分离&#xff0c;以提高代码的可维护性、可扩…

FineBI实战项目一(7):每天每小时上架商品个数

1 明确数据分析目标 对所有商品的商家时间进行统计&#xff0c;统计每个小时上架商品的个数 2 创建用于保存数据分析结果的表 create table app_hour_goods(id int primary key auto_increment,daystr varchar(20),hourstr varchar(20),cnt int ); 3 编写SQL语句进行数据分析…

鉴源论坛 · 观模丨浅谈Web渗透之信息收集(下)

作者 | 林海文 上海控安可信软件创新研究院汽车网络安全组 版块 | 鉴源论坛 观模 社群 | 添加微信号“TICPShanghai”加入“上海控安51fusa安全社区” 信息收集在渗透测试过程中是最重要的一环&#xff0c;“浅谈web渗透之信息收集”将通过上下两篇&#xff0c;对信息收集、…

用PreMaint引领先进的预测性维护

在设备维护领域&#xff0c;预测性维护成为一项利用先进技术和巧妙工具的数据驱动战略。这一战略通过条件监控和数据分析&#xff0c;以主动维护的方式识别潜在的设备缺陷&#xff0c;避免问题升级。高效使用PreMaint预测性维护工具可不仅节省时间和成本&#xff0c;更显著提升…

Eureka的自我保护机制

文章目录 一&#xff1a;Eureka的自我保护机制是什么&#xff1f;二&#xff1a;为什么会出现自我保护机制&#xff1f;三&#xff1a;怎么禁止Eureka的自我保护&#xff1f;3.1&#xff1a;来看看开启自我保护模式的时候&#xff0c;Eureka服务端提示&#xff1a;3.2&#xff…

【题解】—— LeetCode一周小结

1.经营摩天轮的最大利润 题目链接&#xff1a; 1599. 经营摩天轮的最大利润 你正在经营一座摩天轮&#xff0c;该摩天轮共有 4 个座舱 &#xff0c;每个座舱 最多可以容纳 4 位游客 。你可以 逆时针 轮转座舱&#xff0c;但每次轮转都需要支付一定的运行成本 runningCost 。摩…

Python爬虫必学数据库:MongoDB

微信公众号&#xff1a;愤怒的it男&#xff0c;超多Python技术干货文章。 MongoDB由C编写而成&#xff0c;是免费开源跨平台的非关系型数据库&#xff0c;与关系型数据库不同&#xff0c;MongoDB将数据存储在类似JSON的文档中&#xff0c;这使得数据库非常灵活和可伸缩。 一、环…

springcloud bus消息总线

简介 Spring Cloud Bus 配合Spring Cloud Config 使用可以实现配置的动态刷新。 Spring Cloud Bus是用来将分布式系统的节点与轻量级消息系统链接起来的框架&#xff0c;它整合了Java的事件处理机制和消息中间件的功能。Spring Clud Bus目前支持RabbitMQ和Kafka。 Spring C…

云计算任务调度仿真01

云计算任务调度的研究大多数以来仿真研究&#xff0c;现梳理一些做过的代码研究 结果无数次的排错&#xff0c;终于finish with code 0 了 这个代码以来的是比较老的TensorFlow版本&#xff0c;我们都知道TensorFlow1.x和TensorFlow2.x之间有很大差别&#xff0c;但其实&#…

vue3中路由的使用(详细讲解)

1、路由的简介 路由(route)&#xff1a;就是根据特定的规则将数据包或请求从源地址传输到目标地址的过程。 在前端或者vue3项目中路由主要用于构建单页面应用程序&#xff08;SPA&#xff09;&#xff0c;其中所有的页面都在同一个HTML文件中加载&#xff0c;通过JavaScript动…

无人驾驶卡尔曼滤波

无人驾驶卡尔曼滤波&#xff08;行人检测&#xff09; x k a x k − 1 w k x_k ax_{k-1} w_k xk​axk−1​wk​ w k w_k wk​&#xff1a;过程噪声 状态估计 估计飞行器状态&#xff08;高度&#xff09; x k z k − v k x_k z_k - v_k xk​zk​−vk​ 卡尔曼滤波通…

OpenAI 是如何一步一步把RAG做到98%的准确性得

参考OpenAI的官方演讲&#xff0c;如何做好RAG。本文整理的内容&#xff0c;均来源于此演讲内容。 【OpenAI演讲-自制中文字幕】干货-如何提升大模型表现&#xff1f;-提示工程、RAG与Fine-Tuning技巧详解_哔哩哔哩_bilibili 45% 的准确性 普通搜索不做任何处理的效果&#x…

人工智能_机器学习091_使用三维瑞士卷数据_KMeans聚类算法进行瑞士卷数据聚类---人工智能工作笔记0131

然后我们首先来构建一下数据 准备瑞士卷数据: import numpy as np 导入数学计算包 import matplotlib.pyplot as plt 导入画图包 #自底向上聚类 from sklearn.cluster import AgglceerativeClustering 导入分层聚类模型 from sklearn.datasets import make_swiss_roll # 瑞士卷…

给自己创建的GPTs添加Action(查天气)

前言 在这篇文章中&#xff0c;我将分享如何利用ChatGPT 4.0辅助论文写作的技巧&#xff0c;并根据网上的资料和最新的研究补充更多好用的咒语技巧。 GPT4的官方售价是每月20美元&#xff0c;很多人并不是天天用GPT&#xff0c;只是偶尔用一下。 如果调用官方的GPT4接口&…