3、盒模型新增样式

最新推荐文章于 2022-10-06 11:26:56 发布
最新推荐文章于 2022-10-06 11:26:56 发布
阅读量160 收藏
点赞数
分类专栏： CSS3 文章标签： border-radius
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010502101/article/details/83385835
版权

一、box-shadow
在CSS3中盒模型新增了box-shadow样式，该样式可以为盒模型设置阴影，详解见 box-shadow

示例，下面为盒模型设置阴影

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#sh{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background: red;
				width: 300px;
				height: 300px;
				text-align: center;
				line-height: 300px;
				font-size: 50px;
				box-shadow: 10px 10px 10px 10px yellow;
			}
		</style>
	</head>
	<body>
		<div id="sh">
			上海
		</div>
	</body>
</html>

box-shadow: 10px 10px 10px 10px yellow表示原来的盒模型向下、向左、扩展、模糊半径各位10px
效果如下：
在这里插入图片描述

二、border-radius
CSS3新增属性border-radius，允许你设置元素的外边框圆角。
border-radius属性是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius按顺序的简写，用来设置举行或长方形的4个角的弧度，可以圆弧度，也可以是椭圆弧度，顺序从左上角开始，按顺时针方向。属性的值可以用px或者%表示。
border-radius属性见 https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius
1、例如border-radius ：50%，表示四个角的圆半径为长或宽的50%，等价于

border-top-left-radius:     50%;
border-top-right-radius:     50%;
border-bottom-right-radius:  50%;
border-bottom-left-radius:   50%;

示例

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#id{
				width: 300px;
				height: 300px;
				background: green;
				left: 0px;
				right: 0px;
				top: 0px;
				bottom: 0px;
				margin: auto;
				position: absolute;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div id="id">
			
		</div>
	</body>
</html>

在这里插入图片描述

也可以分别设置每个角的弧度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#id{
				width: 300px;
				height: 300px;
				background: green;
				left: 0px;
				right: 0px;
				top: 0px;
				bottom: 0px;
				margin: auto;
				position: absolute;
				border-radius: 30px 60px 90px 120px;
			}
		</style>
	</head>
	<body>
		<div id="id">
			
		</div>
	</body>
</html>

在这里插入图片描述

2、也可以设置椭圆弧度
上面border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius都是设置的一个值，表示的圆半径，可以可以设置两个值，表示椭圆的半长轴和半短轴
例如border-radius: 200px/100px相当于

border-top-left-radius:     200px 100px;  #椭圆的场半轴 短半轴
border-top-right-radius:     200px 100px;
border-bottom-right-radius:  200px 100px;
border-bottom-left-radius:  200px 100px;

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#id{
				width: 400px;
				height: 200px;
				background: green;
				left: 0px;
				right: 0px;
				top: 0px;
				bottom: 0px;
				margin: auto;
				position: absolute;
				border-radius: 200px/100px;
			}
		</style>
	</head>
	<body>
		<div id="id">
			
		</div>
	</body>
</html>

在这里插入图片描述

综合1、2示例，风车

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		html, body{
			height: 100%;
			overflow: hidden;
		}
			#wrap{
				width: 500px;
				height: 500px;
				/*background: red;*/
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				position: absolute;
				margin: auto;
				transition: 2s
			}
			
			#wrap > div{
				width: 200px;
				height: 200px;
				background: red;
				float: left;
				margin: 25px;
			}
			
			#wrap > div:nth-child(1), #wrap > div:nth-child(4){
				border-radius: 0 50%;
			}
			#wrap > div:nth-child(2), #wrap > div:nth-child(3){
				border-radius: 50% 0;
			}
			#wrap:hover{
				transform: rotate(360deg);
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</body>
</html>

在这里插入图片描述

苍鹰蛟龙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
新增UI方案（文本新增样式、盒模型新增样式、新增UI样式）.rar
05-10
2. **盒模型新增样式**： - **阴影**：`box-shadow`属性允许我们为元素添加阴影效果，包括水平偏移、垂直偏移、模糊半径和阴影扩展半径等参数，可以创建出立体感和深度。 - **倒影**：虽然CSS标准中没有直接的倒影...
盒模型新增样式
weixin_30319153的博客
07-23 69
1、盒模型阴影 box-shadow:inset 10px 10px 10px 0px black;内阴影 倒影：-webkit-box-reflect 设置元素的倒影 转载于:https://www.cnblogs.com/dayin1/p/11234853.html
盒子模型样式
g960526的博客
03-31 569
盒子模型样式 网页构成布局的元素均为矩形，那么是矩形宽高，边距等特性的表现可以被抽象的理解为一个盒子； 盒子与盒子之间的关系： 1.盒子的大小可能不一样 2.盒子与盒子之间的间隔可能不一样 3.大盒子里面放小盒子，小盒子位置不确定 4.盒子边缘的厚度可能有厚有薄 所以实际上总的来说，网页元素在组成一个结构的时候追主要的就是如下四个区域与样式： 1.center–元素的宽高（width/height...
css盒模型、布局模型、 flex弹性盒模型及样式设置小技巧
qq_62945955的博客
12-11 816
一、盒模型 元素分类 常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有： <a>、<span>、<br>、<i>、<em>、<strong&gt...
CSS3-弹性盒子模型
weixin_61006312的博客
10-06 691
css3-弹性盒子模型
CSS 盒子模型及相关属性、元素类型转换及CSS3新增盒子属性
YuLong的博客
04-19 2229
文章目录盒子模型认识盒子模型盒子模型的相关属性边框属性外边距属性内边距属性背景属性CSS3新增盒子模型属性元素类型转换块级元素行内元素div和span标签元素类型转换 盒子模型 认识盒子模型 盒子模型：网页布局的基础 一个盒子可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。 margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。 盒子的大小： 盒子的总
CSS盒模型完整介绍
陈坚泓的博客
03-07 8388
CSS盒模型完整介绍盒模型的认识一、基本概念：标准模型+IE模型二、标准模型和IE模型的区别三、css如何设置获取这两种模型的宽和高四、javascript如何设置获取盒模型对应的宽和高五、外边距重叠六 、BFC推荐阅读 你越是认真生活，你的生活就会越美好——弗兰克·劳埃德·莱特 《人生果实》经典语录 盒模型的认识 文章主要有以下内容 基本概念：标准模型+IE模型。 包括margin,border,padding,content 标准模型和IE模型的区别 css如何设置获取这两种模型的宽和高 js如何
盒子模型及其通用属性
huhuhuja
12-02 5666
1.认识盒子模型 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： 不同部分的说明： Margin(外边距)- 清除边框外的区域，外边距是透明的。 Border(边框)- 围绕在内边距和内容外的边框。 Padding(内边距)- ...
【39】CSS3 （2）——盒模型
倏存的博客
04-08 169
⚪CSS3 盒模型属性介绍⚪content-box 标准模式 ⚪border-box 怪异模式
使用HTML开发商业网站-CSS盒子模型新增关属性课件.pptx
07-10
CSS3引入了许多新的特性，其中盒子模型的新增属性极大地丰富了网页的样式设计。下面我们将深入探讨这些新增的盒子模型属性，包括颜色透明度、圆角、图片边框、阴影以及渐变。 1. **颜色透明度** CSS3通过`rgba()`...
纯CSS3实现使用立方体几何模型构建3D文字动画效果源码.zip
10-31
2. **CSS3盒模型**：包括边距塌陷、盒阴影（box-shadow）和内边距背景（background-clip）等。 3. **CSS3边框与圆角**：border-radius属性用于创建圆角效果，增强界面的视觉感受。 4. **CSS3颜色与渐变**：新增了更...
新增CSS3绘制叮当猫DEMO.zip
08-25
首先，CSS3中的选择器和盒模型是构建这个DEMO的基础。CSS3引入了更精确、更强大的选择器，如伪类和伪元素，使得我们可以针对不同状态或元素部分进行精确的样式控制。盒模型的改进，如边距塌陷的处理和box-sizing属性...
.多边形自然-Synty的低多边形3D艺术
03-01
我们很荣幸为 POLYGON 系列提供混合样式树这一新增功能。弥合 POLYGON 与更传统的层级资源之间的差距。我们还提供了一组经典的 POLYGON 风格的树木和植被以满足你的需求。 该包还附带了一组详细的 POLYGON 样式地形...
【创新未发表】Matlab实现遗传算法GA-RF实现风电预测算法研究.rar
08-02
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
蚁群算法（培训）.pdf
08-02
蚁群算法（培训）.pdf
【中科院1区】Matlab实现花朵授粉优化算法FPA-RF锂电池健康状态估计算法研究.rar
最新发布
08-02
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
基于JAVA的应急物资管理系统（Vue.js+SpringBoot+MySQL）
08-02
基于Vue.js和SpringBoot的应急物资管理系统是一个高效、易用的物资管理平台，它分为用户前台和管理后台两个部分，以满足不同角色的需求。管理员可以通过管理后台进行物资的入库、出库、库存查询等操作，同时对物资申请进行审批，确保物资的合理分配。普通用户则可以在用户前台进行健康打卡，记录自己的健康状况，并通过物资申请模块提交物资需求，以便在紧急情况下获得必要的支持。此外，系统还提供了物资运输模块，帮助管理员跟踪物资的运输状态，确保物资能够及时送达。整个系统的设计注重用户体验和操作便捷性，旨在为用户提供一个全面、高效的物资管理解决方案。 演示录屏：https://www.bilibili.com/video/BV1Nz42127g7 配套教程：https://www.bilibili.com/video/BV1pW4y1P7GR
【中科院1区】Matlab实现非洲秃鹫优化算法AVOA-RF故障诊断算法研究.rar
08-02
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
"CSS3新增背景属性与值，解密背景盒模型
在CSS3中，新增的3个background属性分别为：background-clip、background-origin和background-size。这些属性为开发人员提供了更多的背景操作选项，使背景样式更加灵活和多样化。 background-clip属性指定了背景...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值