CSS3_Node1_选择器&边框&阴影_html radio 边框阴影-优快云博客

本文详细介绍了CSS3的新增特性，包括选择器、边框、阴影等，通过实例讲解了如何利用这些特性来丰富网页的表现形式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

-->CSS3 简介
-->CSS3 选择器
-->CSS3 边框
圆角边框、多色彩边框、图像边框
-->CSS3 阴影
文本阴影、盒阴影

一、CSS3 简介

CSS3是CSS技术的一个升级版本，是由Adobe Systems、Apple、Google、HP、IBM、Microsoft、Mozilla

、Opera、Sun Microsystems等许多Web界巨头联合组成的一个名为“CSS Working Group”的组织共同协商策划的。

CSS3技术概况

选择器

边框、阴影、

倒影、渐变、蒙版、

旋转、变形...

动画

布局

二、CSS3 选择器

1、子元素选择器

E > F

E元素内的第一级子元素F css2

2、兄弟元素选择器

E + F	E元素后面的第一个兄弟元素F css2
E ~ F	所有在E元素之后的兄弟元素F

3、属性选择器

E[att]	有属性att的所有E元素 css2
E[att='val']	属性att的值是val的元素 css2
E[att^='val']	属性att的值以val开头的元素
E[att$='val']	属性att的值以val结尾的元素
E[att*='val']	属性att的值包含val字符串的元素

4、伪元素选择器

E::first-line->设置对象内的第一行的样式。

E::first-letter->设置对象内的第一个字符的样式。

E::selection-->设置对象被选择时的颜色, 基本上只有 background 、color 有效果

E::before-->在E元素中前置新添内容

E::before-->在E元素中后置新添内容

E::placeholder-->设置对象文字占位符的样式。-->用于提示文字使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style>
*{margin:0;padding:0;}
.txt{
	font-size: 20px;
	width:400px;
	border: 1px solid #333;
}
/* 1-E::first-line->设置对象内的第一行的样式。 */
 .txt::first-line{
	background: pink;
}
/* 2-E::first-letter->设置对象内的第一个字符的样式。 */
.txt::first-letter{
	background: orange;
	font-size: 30px;
	color:#fff;
	padding: 10px;
	margin:5px;
} 
/*3-E::selection-->设置对象被选择时的颜色,
基本上只有 background 、color 有效果*/
.txt::selection{
	color:red;
	background: #000;
}
/* 4-E::before-->在E元素中前置新添内容 */
.txt::before{
	content: '你好!';
	background:blue;
	color:#fff;
	font-size: 40px;
}
/* 5-E::before-->在E元素中后置新添内容 */
.txt::after{
	content: '你好!';
	background:blue;
	color:#fff;
	font-size: 40px;
}

input{
	color:red;/* 输入文字颜色 */
	font-size: 30px;
	padding:10px;
}
/* 6-E::placeholder-->设置对象文字占位符的样式。-->用于提示文字使用 */
/* 谷歌-苹果 */
input::-webkit-input-placeholder{
	color:blue;/* 提示文字颜色 */
}
/*火狐*/
input::-moz-placeholder{
	color:blue;/* 提示文字颜色 */
}
/* IE */
input:-ms-input-placeholder{
	color:blue;/* 提示文字颜色 */
}
</style>
</head>
<body>
	<input type="text" value="" placeholder="请输入用户名"><br>
	<p class="txt">就打开附件积分看间看电视了分积分看间看电积分看间看电积分看间看电积分看间看电积分看间看电积分看间看电积分看间看电积分看间看电积分看间看电积分看间看电积分看间看电积分看间看电积分看间看电积分看间看电开附件积分看间看电视了分积分看间看电积分看间看电积分看间看电积分看间看电积分看间看电积分看间看电积分看间看电积分看间看电</p>
</body>
</html>

5、表单元素状态伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单元素状态伪类选择器</title>
<style>
/* 1-E:enabled->匹配表单中可用的元素 */
input:enabled{
	border: 1px solid green;
}
/* 2-E:disabled->匹配表单中禁用的元素 */
input:disabled{
	border: 1px solid red;
}

 input[name=abc]{
	color:blue;/*无效*/
	background: #000;/*无效*/
	margin-left:20px;
} 
/* 3-E:checked->匹配表单中被选中的radio或checkbox元素 */
input:checked{
	margin-left:50px;
}
</style>
</head>
<body>
	<input type="text" value="匹配表单中可用的元素" >
	<!-- disabled->匹配表单中禁用的元素 -->
	<!-- <input type="text" value="" disabled=""> -->
	<input type="text" value="匹配表单中禁用的元素" disabled><!-- 效果同上 -->


	<input type="radio" value="" name="abc">
	<input type="radio" value="" name="abc">
	<input type="checkbox" value="" name="abc">
	<input type="checkbox" value="" name="abc">
	<input type="checkbox" value="" name="abc">

</body>
</html>

6、结构性伪类

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构性伪类选择器</title>
<style>
*{margin:0;padding:0; list-style: none; }
ul{
	overflow: hidden;
}
ul li,dl dt,dl dd,div p,div h3,.e{
	float: left;
	width:100px;
	height:100px;
	line-height: 100px;
	font-size: 30px;
	text-align: center;
	background: #ccc;
	margin-left: 10px;
		margin-top:5px;
}
dl{
	overflow: hidden;
	margin-top: 20px;
}
 /*1-E:first-child->选择第一个子元素E  ss2 */
 /*2-E:last-child->选择最后一个子元素E*/
 ul li:first-child{
	background: red;
}
dl dt:first-child{
	background: red;
}
dl dd:first-child{没效果->dd不是dl第一个字元素
	background: red;
} 


/* 3-E:nth-child(n)->选择一个或多个特定的子元素-->索引从1开始*/
 ul li:nth-child(2){
	background: blue;
}
dl dt:nth-child(2){没效果->dt不是dl第2个字元素
	background: blue;
}
dl dd:nth-child(2){
	background: blue;
} 

/* 4-E:nth-last-child(n)->选择一个或多个特定的子元素，从最后一个子元素开始算
*/
 ul li:nth-last-child(1){
	background: orange;
}
dl dd:nth-last-child(1){
	background: orange;
} 


/* 5-E:nth-of-type(n)->选择指定的元素，仅匹配使用同种标签的元素 */
 ul li:nth-of-type(2){
	background: green;
}
dl dt:nth-of-type(2){
	background: green;
} 
/* 6-E:nth-last-of-type(n)->选择指定的元素，从元素的最后一个开始计算，仅匹配使用同种标签的元素 */
 dl dt:nth-last-of-type(2){
	background: green;
} 

/* 7-E:first-of-type--匹配父元素下使用同种标签的第一个子元素 */
/* 8-E:last-of-type--匹配父元素下使用同种标签的最后一个子元素 */


/* 9-E:only-child--匹配父元素下仅有一个子元素 */
 div p:only-child{
	color:red;
} 
/* 10-E:only-of-type-->匹配父元素下使用同种标签的唯一一个子元素 */
 div p:only-of-type{
	color:green;
} 

/* 11-E:empty-->匹配一个不包含任何子元素的元素  ( 文本节点也被看作子元素 ) */
 div:empty{
	background: #000;
} 
/* 12-E:not(s)-->匹配不符合当前选择器的任何元素( 反选 ) */

div p:not([class='123']){
	background: pink;
}



/* 练习 */
 ul li:nth-child(2n){n从1开始递增
	background: blue;
	color:#fff;
} 
 ul li:nth-child(3n){n从1开始递增
	background: blue;
	color:#fff;
} 
 ul li:nth-child(2n+1){n从0开始递增
	background: blue;
	color:#fff;
} 
 ul li:nth-child(3n+1){n从0开始递增
	background: blue;
	color:#fff;
} 
</style>
</head>
<body>
	<ul>
		<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>0</li>
	</ul>
	<dl>
		<dt>dt1</dt><dd>dd1</dd>
		<dt>dt2</dt><dd>dd2</dd>
		<dt>dt3</dt>dd>dd3</dd>
		<dt>dt4</dt><dd>dd4</dd>
		<dt>dt5</dt><dd>dd5</dd>
		<dt>dt6</dt><dd>dd6</dd>
		<dt>dt7</dt><dd>dd7</dd>
		<dt>dt8</dt><dd>dd8</dd>
		<dt>dt9</dt><dd>dd9</dd>
		<dt>dt0</dt><dd>dd0</dd>
	</dl>
<div>
	<p>p1</p>
	<p class="123">p2</p>
	<h3>h31</h3>
</div>
<div>
	<p>p3</p>
</div>
<div>
	<h3>h32</h3>
</div>
<div class="e"></div>
</body>
</html>

三、CSS3 边框

1、圆角边框

^语法：水平方向 / 垂直方向
border-radius：[ length | % ]{1,4} / [ length | % ]{1,4}
border-top-left-radius:5px ;
border-top-right-radius:15px;
border-bottom-right-radius:20px;
border-bottom-left-radius:25px;
border-radius:5px 15px 20px 25px ;

border-radius:20px / 10px ; ?

^ 浏览器支持情况-->IE6 7 8 不支持

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角边框_border-radius</title>
<style>
p{
	width:100px;
	height:100px;
	line-height: 100px;
	text-align: center;
	font-size: 50px;
	color:#666;
	margin:50px 10px 0 5px;
	background:yellow;
	float: left;
}
p:nth-child(1){
	/*border-radius:20px;*/
	/*border-radius:20%;*/
	/*border-radius:20%/20%;*/
	/* 语法 ：     水平方向      /     垂直方向
	[ length | % ]{1,4} / [ length | % ]{1,4} */
	border-radius:20% 20% 20% 20%/20% 20% 20% 20%;
}
p:nth-child(2){
	/* 每条边圆长度一半 */
	border-radius:50%;
}
p:nth-child(3){
	/*border-radius: 50% 0 50% 0;*/
	border-radius: 50% 0;
}
p:nth-child(4){
	border-radius: 50% 0 50% 50%;
}
p:nth-child(5){
	border-radius: 0 0 0 50%;
}
p:nth-child(6){
	width:200px;
	/*border-radius:50%;*/
	border-radius:100px/50px;
}
p:nth-child(7){
	width:0;
	height: 0;
	border:50px solid yellow;
	border-radius: 50%;
	border-right-color: transparent;
	background: transparent;
}
p:nth-child(8){
	width:0;
	height: 0;
	border:50px solid red;
	border-radius: 50%;
	border-right-color: transparent;
	border-left-color: transparent;
	border-top-color: orange;
	border-bottom-color: blue;
	background: transparent;
}
p:nth-child(9){
	border-top-left-radius:50px;/*左上角*/
	border-top-right-radius:25px;/*右上角*/
	border-bottom-right-radius:50px;/*右下角*/
	border-bottom-left-radius:25px;/*左下角*/
}
p:nth-child(10){
	/* 四个值-->左上-右上-右下-左下 */
	border-radius:5px 15px 20px 25px ; 
}
</style>
</head>
<body>
	<p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>F</p><p>G</p><p>H</p><p>I</p><p>J</p>
</body>
</html>

2、多色彩边框

语法：
border-colors：<color> 相关属性：
border-top-colors
border-right-colors
border-bottom-colors
border-left-colors

浏览器支持情况-->火狐（FF）2.0以上版本支持

3、图像边框

语法：
border-image：border-image-source || border-image-slice [ / border-image-width? [ / border-image-outset ]? ]? || border-image-repeat

border-image-source : 图片边框的路径
border-image-slice : 图片边框向内偏移
border-image-width：图片边框的宽度

border-image-repeat : 指定边框背景图的填充方式

支持程度-->IE6 7 8 9 10 不支持

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像边框</title>
<style>
*{margin:0;padding:0; list-style: none;}
.box1{
	margin:50px auto;
	width:500px;
	height:220px;
	background: #eee;
	border-width: 50px;
	border-style: solid;
	border-image-width:50px;
	 border-image-source:url(bg.png);
	border-image-slice: 33%;
	border-image-repeat:repeat; 
	/*简写*/
	/*border-image:url(bg.png) 33% round;*/
}
</style>
</head>
<body>
	<div class="box1">
	</div>
</body>
</html>
<!-- 
border-image-source	用在边框的图片的路径。	
border-image-slice	图片边框向内偏移。	
border-image-width	图片边框的宽度。	
border-image-outset	边框图像区域超出边框的量。	
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
 -->

四、CSS3 阴影

1、文本阴影

语法
text-shadow：none | length{2,3} color 默认值：none
取值
none：无阴影第1个长度值：阴影水平偏移值。可为负值第2个长度值：阴影垂直偏移值。可为负值第3个长度值：可选，阴影模糊值。不允许负值 color：设置阴影的颜色。

说明可以设定多组效果，每组参数值以逗号分隔。

文本阴影
阴影属性的属性值组成
text-shadow:
水平偏移量垂直偏移量阴影模糊值颜色(rgba)，
水平偏移量垂直偏移量阴影模糊值颜色(rgba)，
水平偏移量垂直偏移量阴影模糊值颜色(rgba);

使用空格分开不同属性值; 使用逗号分开不同阴影属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本阴影-text-shadow</title>
<style>
*{margin:0;padding:0; list-style: none;}
.con{
	width:900px;
	margin:10px auto;
}
.con h1{
	height:300px;
	line-height: 300px;
	text-align: center;
	font-size: 100px;
	font-family: '微软雅黑';
}
.con h1:nth-child(1){
	color:#343434;
	background: #454545;
	/* 低版本用 */
	-webkit-text-shadow:-2px -2px 0 #fff,2px 2px 0 #666;
	/* W3C */
	text-shadow:-2px -2px 0 #c8c8c8,2px 2px 0 #666;
}
.con h1:nth-child(2){
	color:#fff;
	background: #000;
	/* text-shadow:0 0 2px rgba(224,0,223,0.9),0 0 10px rgba(224,0,223,0.8),0 0 30px rgba(224,0,223,0.6),0 0 50px rgba(224,0,223,0.4),0 0 60px rgba(224,0,223,0.3),0 0 120px rgba(224,0,223,0.2); *//* W3C */
	text-shadow:0 0 10px rgba(207,5,203,1),0 0 20px rgba(207,5,203,1),0 0 40px rgba(207,5,203,1),0 0 60px rgba(207,5,203,1),0 0 80px rgba(207,5,203,1);
}
.con h1:nth-child(3){
	color:#fff;
	background: #dddddd;
	text-shadow:0 7px 0 rgba(200,200,200,1),0 14px 0 rgba(185,185,185,1),0 16px 10px rgba(171,171,171,1);
}
.con h1:nth-child(4){
	/*color:#ff4272;*/
	color:transparent;
	background: #eeeeee;
	text-shadow:0 0 10px rgba(255,66,114,1),0 0 40px rgba(255,66,114,10.8);
}
.con h1:nth-child(5){
	color:#cccccc;
	background: #d5d2bf;
	text-shadow:3px 3px 0 rgba(255,255,255,1),-3px -3px 0 rgba(44,45,39,1);
}
.con h1:nth-child(6){
	color:#736f6c;
	background: #eee;
	text-shadow:3px 3px 0 rgba(17,0,159,1),-3px -3px 0 rgba(17,0,159,1);
}
.con h1:nth-child(7){
	color:#d5d2c1;
	background: #d5d2bf;
	text-shadow:2px 2px 0 #040100,-2px -2px 0 #040100;
}
.con h1:nth-child(8){
	color:#fe0002;
	background: #eee;
	text-shadow:2px 2px 0 #da210d,-2px -2px 0 #da210d,0 -5px 10px rgba(254,57,4,1),0 -10px 20px rgba(254,57,4,1),0 -20px 40px rgba(254,57,4,1),0 -40px 50px rgba(254,57,4,0.8);
}
</style>
</head>
<body>
	<div class="con">
		<h1>Beautiful Text</h1><h1>Beautiful Text</h1>
		<h1>Beautiful Text</h1><h1>Beautiful Text</h1>
		<h1>Beautiful Text</h1><h1>Beautiful Text</h1>
		<h1>Beautiful Text</h1><h1>Beautiful Text</h1>
	</div>
</body>
</html>

2、盒阴影

语法
box-shadow：none | length{2,4} color 默认值：none
取值

none：无阴影

第1个长度值：阴影水平偏移值。可为负值

第2个长度值：阴影垂直偏移值。可为负值

第3个长度值：可选，阴影模糊值。不允许负值

第4个长度值：可选，阴影外延值。不允许负值

color：设置阴影的颜色。

属性：box-shadow。

和文本阴影相比，盒阴影多一个属性值——阴影外延值（第四个值）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒阴影-box-shadow</title>
<style>
*{margin:0;padding:0; list-style: none;}
div{
	width:400px;
	height:130px;
	line-height: 130px;
	font-size: 60px;
	color: #666;
	font-weight: bolder;
	margin:50px auto;
	border-radius: 40%;
	background: #CCCCFF;
	text-align: center;
}
.con1{
	box-shadow:3px -3px 5px 0px rgba(169,169,232,1),6px -6px 10px 2px rgba(169,169,232,1),12px -12px 5px 2px rgba(169,169,232,0.6);
}
.con2{
	box-shadow:0 0 9px 6px rgba(156,156,239,1);
}
</style>
</head>
<body>
	<div class="con1">box shadow</div>
	<div class="con2">box shadow</div>
</body>
</html>