第一部分 选择器、阴影与边框

最新推荐文章于 2024-11-12 11:19:19 发布
最新推荐文章于 2024-11-12 11:19:19 发布
阅读量211 收藏
点赞数 7
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_71027798/article/details/134818708
版权

目录

0108 CSS3基础

0109 层级选择器

0110 属性选择器

0111 结构伪类选择器

0112 目标伪类选择器

0113 UI状态伪类选择器

0114 否定和动态伪类选择器

0115 文本阴影

0116 盒子阴影

0117 圆角边框上

0118 圆角边框下

0119 圆角案例

0108 CSS3基础

0109 层级选择器

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			/* 自带选择器 */
			.box>li {
				border: 1px solid red;
			}
			/* 当前元素的后面的第一个兄弟 */
			/* .child+li{
				background: yellow;
			} */
			/* ~当前元素的后面的所有的亲兄弟 */
			.child~li{
				background: yellow;
			}
			
			.container+p{
				background: red;
			}
		</style>
	</head>
	<body>
		<ul class="box">
			<li>1111
				<ul>
					<li>111-111</li>
					<li>111-222</li>
					<li>111-333</li>
				</ul>
			</li>
			<li class="child">2222</li>
			<li>3333</li>
			<li>44444</li>
			<li>5555</li>
		</ul>
		
		<div class="container">div-1111</div>
		<p>p-11111</p>
		<p>p-22222</p>
		<div>
			<p>p-33333333</p>
		</div>
	</body>
</html>

0110 属性选择器

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			/* 属性选择器 */
			div[class]{
				background: yellow;
			}
			/* div.box1{
				
			} */
			p[class]{
				background: red;
			}
			/* 完全匹配 */
			/* div[class=box1]{
				border: 1px solid blue;
			} */
			/* 包含就匹配 */
			div[class~=box1]{
				border: 1px solid blue;
			}
			input[name]{
				background: yellow;
			}
			input[type=email]{
				background: red;
			}
			
			/* 模糊匹配 */
			/* class^=b 以这个开头的
			class$=b 以这个结尾的
			class*=b 包含某个字符 */
			
			div[class^="b"]{
				color: green;
			}
			div[class$="3"]{
				color: white;
			}
		</style>
	</head>
	<body>
		<div class="box1">div-11111</div>
		<div class="box2">div-22222</div>
		<div>div-33333</div>
		<div class="box1">div-44444</div>
		<p class="p1">p-11111</p>
		<p class="p2">p-22222</p>
		<p>p-33333</p>
		
		<div>
			<h1>注册页面</h1>
			用户名：<input type="text" name="username"/><br />
			密码：<input type="password" name="password"/><br />
			年龄：<input type="number" name="age"/><br />
			邮箱：<input type="email" /><br />
			<input type="submit">
		</div>
	</body>
</html>

0111 结构伪类选择器

示例代码1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			.box{
				width: 940px;
				height: 100px;
				margin: 0 auto;
				background: yellow;
			}
			.box div{
				float: left;
				width: 300px;
				height: 100px;
				background-color: red;
				margin-right: 20px;
			}
			.box div:last-child{
				margin-right: 0;
			}
		</style>
	</head>
	<body>
		<!-- 通过某种结构关系查找页面元素
		比如:
		匹配某元素第一个子元素
		匹配某元素最后一个子元素 -->
		
		<div class="box">
			<div></div>
			<div></div>
			<div></div>
		</div>
	</body>
</html>

示例代码2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			/* li:first-child{
				background: yellow;
			}
			li:last-child{
				background: red;
			} */
			
			/* 第几个 */
			/* li:nth-child(2){
				background: blue;
			} */
			
			/* 第几个 偶数 2n(even)  奇数 2n+1 2n-1(odd)*/
			li:nth-child(odd){
				background: yellow;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>11111</li>
			<li>22222</li>
			<li>33333</li>
			<li>44444</li>
			<li>55555</li>
		</ul>
	</body>
</html>

示例代码3：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			div{
				border: 1px solid black;
			}
			div p:only-child{
				background: red;
			}
		</style>
	</head>
	<body>
		<div>
			<p>1111</p>
			<p>2222</p>
		</div>
		
		<div>
			<p>11111</p>
		</div>
	</body>
</html>

示例代码4：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			div{
				width: 100px;
				height: 100px;
			}
			div:empty{
				background: yellow;
			}
		</style>
	</head>
	<body>
		<div>
			11111
		</div>
		<div></div>
	</body>
</html>

示例代码5：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			:root,body{
				height: 100%;
				background: yellow;
			}
		</style>
	</head>
	<body>
		
	</body>
</html>

0112 目标伪类选择器

E:target

选择匹配E的所有元素，且匹配元素被相关URL指向

示例代码1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
				position: fixed;
				right: 0;
				top: 100px;
			}
			li{
				width: 100px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				border: 1px solid black;
			}
			div{
				height: 600px;
				border: 1px solid #cccccc;
				/* background: yellow; */
			}
			
			div:target{
				background: yellow;
			}
			
			/* 锚点作用:页面不同区域的跳转,使用a链接 
			<a href="#锚点名字"></a>
			
			<div id="锚点名字"></div>
			*/
		</style>
	</head>
	<body>
		<ul>
			<li><a href="#a">京东秒杀</a></li>
			<li><a href="#b">双11</a></li>
			<li><a href="#c">频道优选</a></li>
			<li><a href="#d">特色广场</a></li>
		</ul>
		<div id="a">
			京东秒杀
		</div>
		<div id="b">
			双11
		</div>
		<div id="c">
			频道优选
		</div>
		<div id="d">
			特色广场
		</div>
	</body>
</html>

示例代码2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			div.content{
				display: none;
			}
			div.content:target{
				display: block;
			}
		</style>
	</head>
	<body>
		<div>
			<a href="#aaa">aaa</a>
			<div id="aaa" class="content">
				Lorem ipsum dolor sit amet consectetur adipisicing elit. 
				Officia ex molestias aperiam atque minima beatae quis ab 
				dolorem harum explicabo. Itaque temporibus quos esse 
				dignissimos repellendus doloribus, a architecto quis.
			</div>
		</div>
		<div>
			<a href="#bbb">bbb</a>
			<div id="bbb" class="content">
				Lorem ipsum dolor sit amet consectetur adipisicing elit. 
				Officia ex molestias aperiam atque minima beatae quis ab 
				dolorem harum explicabo. Itaque temporibus quos esse 
				dignissimos repellendus doloribus, a architecto quis.
			</div>
		</div>
		<div>
			<a href="#ccc">ccc</a>
			<div id="ccc" class="content">
				Lorem ipsum dolor sit amet consectetur adipisicing elit. 
				Officia ex molestias aperiam atque minima beatae quis ab 
				dolorem harum explicabo. Itaque temporibus quos esse 
				dignissimos repellendus doloribus, a architecto quis.
			</div>
		</div>
	</body>
</html>

0113 UI状态伪类选择器

3、UI 元素状态伪类选择器

E:enabled 匹配所有用户界面 (form表单) 中处于可用状态的E元素

E:disabled 匹配所有用户界面 (form表单) 中处于不可用状态的E元素

E:checked 匹配所有用户界面 (form表单)中处于选中状态的元素E

E:selection 匹配E元察中被用户选中或处于高亮状态的部分

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			input:enabled{
				/* background: red; */
			}
			input:disabled{
				background: yellow;
			}
			/* 焦点 会匹配此选择器 */
			input:focus{
				background: blue;
			}
			
			input[type=checkbox]{
				/* 去掉默认样式 */
				appearance: none;
				width: 20px;
				height: 20px;
				border: 1px solid black;
			}
			
			input:checked{
				background: red;
			}
			
			div::selection{
				background: yellow;
				color: red;
			}
		</style>
	</head>
	<body>
		
		<form action="">
			用户者<input type="text" /><br />
			密码<input type="password" /><br />
			
			记住用户名 <input type="checkbox" /><br />
			
			<input type="submit" disabled/>
		</form>
		
		<div>
			Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
			Ea molestiae placeat veniam et ducimus, excepturi animi 
			est eius deserunt in architecto? Tenetur similique rerum 
			ratione voluptatem suscipit aperiam doloribus dolorem!
		</div>
	</body>
</html>

0114 否定和动态伪类选择器

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			/* li:not(:first-child){
				background: yellow;
			} */
			
			li:nth-child(2n+1){
				background: yellow;
			}
			div{
				width: 100px;
				height: 100px;
			}
			div:not(:empty){
				background: red;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>1111</li>
			<li>2222</li>
			<li>3333</li>
			<li>4444</li>
		</ul>
		
		<div>111111</div>
		<div></div>
	</body>
</html>

0115 文本阴影

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			div{
				text-shadow: 0px -10px 1px red,0px 10px 1px yellow;
				/* text-shadow: 0px -10px 1px red; */
			}
			
			/* 10px 水平方向位移
			10px 垂直方向位移
			
			1px 模糊程度
			
			red 阴影颜色 */
		</style>
	</head>
	<body>
		<div>大家好</div>
	</body>
</html>

0116 盒子阴影

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			div{
				width: 100px;
				height: 100px;
				background: yellow;
				margin: 0 auto;
				box-shadow: 10px 10px 1px red inset;
				/* box-shadow: 10px 10px 1px red; */
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

0117 圆角边框上

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			div{
				width: 200px;
				height: 200px;
				background: green;
				margin: 0 auto;
				/* border-radius: 10px 50px 70px 100px; */
				
				/* px 或者百分比
				 v1,四个角都一样
				 v1，v2，左上右下，左下右上 一致
				 v1,v2,v3 左上，左下右上，右下
				 
				 v1,v2,v3,v4 顺时针
				 */
				
				border-top-left-radius: 10px;
				border-top-right-radius: 30px;
				border-bottom-left-radius: 60px;
				border-bottom-right-radius: 100px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

0118 圆角边框下

示例代码1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			div{
				width: 200px;
				height: 200px;
				background: green;
				margin: 0 auto;
				padding: 20px;
				border: 20px solid red;
				/* border-radius: 30px/60px; */
				
				/* 30px/60px 水平/垂直  支持border-radius */
				
				/* border-top-left-radius: 30px/60px; 不支持的*/
				
				/* border-radius: 10px 20px 30px 40px/50px 60px 70px 80px; */
				
				border-radius: 50%;
				
				/* 一半===盒子的一半 */
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

示例代码2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			div{
				width: 500px;
				height: 200px;
				background: green;
				margin: 0 auto;
				/* border-radius: 10%; */
				border-radius: 50px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

示例代码3：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			div{
				width: 100px;
				height: 50px;
				background: green;
				margin: 0 auto;
				border-radius: 50px 50px 0 0;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

示例代码4：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			div{
				width: 200px;
				height: 200px;
				background: green;
				margin: 0 auto;
				border-radius: 200px 0 0 0;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

0119 圆角案例

猛女永不落泪
关注
html 线条外阴影,怎么添加阴影边框？
weixin_39628384的博客
06-09 1653
本文介绍使用CSS添加阴影边框和word文档中添加阴影边框的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。CSS添加阴影边框的方法方法1：使用box-shadow属性添加阴影边框【相关推荐：css在线手册】box-shadow属性可以向框添加一个或多个阴影。语法：box-shadow: h-shadow v-shadow blur spread color inset;属性...
Css3 ，权重，属性选择器，伪类选择器，文本阴影，边框
WangY321的博客
04-10 2429
css3 Css3 是Css2 的“进化”版本, 在Css2 基础上,增强或新增了许多特性,弥补了Css2 的众多不足之处,使得 Web 开发变得更为高效和便捷. 权重 Css 权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。 权重的等级 1、!important，加在样式属性值后，权重值为 10000 2、内联样式，...
CSS3新增（选择器、盒模型、边框阴影）
qq_46492364的博客
03-14 291
文章目录前言一、css31.新增子级选择器2.兄弟选择器3.结构伪类选择器4.5.二、使用步骤1.引入库2.读入数据总结 前言 开始今天的前端学习内容，近几天学的很赶，还是多多复习一下前边的内容，否则就会导致学过的东西却忘记了。 一、css3 1.新增子级选择器 子级选择器用于选取带有特定父元素的元素。>前后必须满足父子级关系。 代码如下（示例）： .box > p { background-color: pink; } .inner > p { co.
9、css3选择器、阴影、圆角边框、背景、怪异模型
m0_58779986的博客
01-08 1201
9、css3选择器、阴影、圆角边框、背景、怪异模型
计算机桌面有边框阴影,“桌面图标下面有阴影的解决方案”的解决方案
weixin_31082403的博客
06-25 1462
解决方案：这种现象一般是由于桌面性能设置、Active Desktop设置、及辅助功能选项设置造成。1.检查桌面是否锁定了web项目，如果是，需要将勾取消。2.是否启用了web桌面：在桌面空白处点击鼠标右键，选择“属性”。在弹出的显示属性对话框中，单击“桌面”选项卡。在桌面选项卡中点击：“自定义桌面”，然后在打开的桌面项目窗口中，点击“web”选项卡。如果网页下面的框中有项目的话，去掉所有项目前面...
CSS3_Node1_选择器&边框&阴影
louShuMei 的博客
10-12 715
-->CSS3 简介  --> CSS3 选择器  -->CSS3 边框          圆角边框、多色彩边框、图像边框  -->CSS3 阴影         文本阴影、盒阴影 一、CSS3 简介 CSS3是CSS技术的一个升级版本，是由Adobe Systems、Apple、Google、HP、IBM、Microsoft、Mozilla 、Opera、Sun Micros
css基本语法（一）——选择器 字体 背景 超链接样式 边框
tcbdbd的博客
07-25 640
css 层叠样式表 主要功能 1.布局定位 2.美化页面 按书写的位置分为三大类 1.内嵌样式表 <html> <head> .............. </head> <body> </body> </html> <style type="text/css"> l...
CSS3新特性详解(一)：CSS3选择器、边框、背景使用细节及案例演示
chuangxin的专栏
06-28 828
CSS3 是 最新的CSS标准，这套新标准提供了更加丰富且实用的规范，如：盒子模型、背景和边框、文字特效、过度、动画等等。在 Web 和小程序开发中采用 CSS3 将会显著的美化我们的应用程序，提升用户体验。从本篇起将陆续讲解CSS3的常用新特性，力求提供更多案例、特效，一来对CSS3做个总结，二来便于今后工作查阅。
Android 自定义控件基本教程之自定义一个圆形ImageView可设置边框和阴影（demo带详细注释）
杨迪龙的博客
03-18 1573
Android 自定义控件基本教程之自定义一个圆形ImageView可设置边框和阴影（demo带详细注释）前言目标效果图感谢流程第一步、自定义属性第二步、初始化控件第三步、测量控件宽高onMeasure第四步、绘制控件onDraw第五步、提供代码修改属性的方法第六步、使用Github 前言 做Android开发，必定离不开的就是自定义控件。祖传的原生控件肯定不足以完成UI设计的全部要求。当然，很多...
CSS控制背景图像平铺实现边框阴影效果
09-25
在现代网页设计中，边框阴影是一种常见的视觉效果，用于增强元素的立体感和层次感。在CSS中，阴影效果可以通过多种方式实现，比如使用`box-shadow`属性直接添加阴影效果。然而，在一些特定的设计需求中，我们可能...
前端学习（CSS3 一）——选择器、边框
weixin_43866830的博客
03-23 401
前端学习之CSS3一、CSS3发展历程及新特性二、CSS3选择器1.相邻兄弟选择器2.通用兄弟选择器3.属性选择器4.结构性伪类选择器5.UI状态伪类选择器6.否定伪类选择器三、CSS3边框1.border-radius（圆角）2.box-shadow（盒阴影）3.border-image（边界图片） 一、CSS3发展历程及新特性   CSS在1997年被W3C接管，这时的CSS是CSS1版本，CSS1的主要功能是设置网页对象的基本样式，如字体、颜色、背景、边框等。紧接着1998年W3C发布了CSS2，提
css新增：透明、伪类、阴影、边框圆角--第十三天
qdcxy_lj的博客
03-09 1195
css新增：透明、伪类、阴影、边框圆角--第十三天
CSS3选择器、边框、背景、按钮
Baiqicute的博客
11-21 607
CSS3概述 (1)、CSS3简介 如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷 动画 圆角 阴影 边框图片 … (2)、CSS3现状 1、浏览器支持程度差，需要添加私有前缀 -webkit- 谷歌 safari -moz- 火狐 -ms- IE 2、移动端支持优于PC端 3、不断改进中 4、应用相对广泛 CSS3选择器 CSS3新增了许多灵活查找...
蓝凌OA-EKP hrStaffWebService 任意文件读取漏洞
iSee857的博客
11-12 394
它集成了流程管理、知识管理、会议管理、公文管理、合同管理、费用管控等多个模块，旨在帮助企业解决基础OA应用、系统集成、开发平台和创新业务定制等长期扩展需求，推动企业实现管理在线化、知识赋能化、运营数字化和人机智能化‌。漏洞，未经身份验证攻击者可通过该漏洞读取系统重要文件（如数据库配置文件、系统配置文件）、数据库配置文件等等，导致网站处于极度不安全状态。在处理客户端输入的参数时，进行严格的验证和过滤，防止未授权的文件访问。返回数据经过base64编码 解码后可得读取数据。
前端 Flex 布局语法详解
ning的博客
11-10 1084
Flex是Flexible Box的缩写，意为“弹性布局”。它允许容器内的项目（子元素）自动调整大小，以适应不同屏幕尺寸和布局需求。如果需要行内Flex布局，可以使用Flex布局提供了一种强大而灵活的方式来创建响应式布局。通过理解并应用上述属性，你可以轻松地创建出复杂且适应不同屏幕尺寸的布局。随着现代浏览器对Flex布局的广泛支持，它已经成为前端开发中不可或缺的一部分。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章CSDN - Flex布局详解菜鸟教程 - Flex 布局语法教程。
Vue中的常用指令
最新发布
m0_62388400的博客
11-12 895
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
@RestController 源码解读：解决 Web 开发中 REST 服务的疑难杂症
狼堡灰太狼的博客
11-11 701
这里可以理解成，注解MyInterface2的value属性重写了注解MyInterface1的value属性，但重新的属性的返回类型必须相同。可以看出对于value这个属性来说，@Configuration注解中的值会重写@Component的value属性值，这有点像类之间的继承，子类可以重父类的方法。达到 @MyInterface1(value2="number1") 和 @MyInterface1(value1="number1") 的效果相同。JDK 17 引入 records 新特性。
【Java Web】JSP实现数据传递和保存（上）九大内置对象 request
m0_66584716的博客
11-07 953
JSP（JavaServer Pages）提供了九个内置对象，这些对象在JSP页面中可以直接使用，无需显式声明。这些内置对象提供了对请求、响应、会话等常用功能的访问，使得开发者可以更方便地处理Web应用程序中的各种任务。
前端性能优化2
Cwhat的博客
11-06 1320
常见问题：首屏速度，白屏时间等。操作速度以及渲染速度。一打开网页时白屏，是因为还需要从服务器那边请求HTML、JS这些过来，加载下来后才有东西渲染首屏速度参考两方面：白屏时间（资源加载时间、首屏js执行）、渲染页面（首屏数据请求、Dom渲染）渲染页面是比较快的，所以大多数时间是花在了白屏时间上，而其中的资源加载时间是占比比较大的。
CSS3选择器与伪类详解
"这是一份关于前端Web CSS3的笔记，涵盖了选择器、属性选择器、伪类和伪元素等多个重要概念。" 在CSS3中，选择器的使用大大增强了我们对网页元素的控制能力。首先，介绍了一些基本的选择器，例如兄弟选择器和子元素...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值