CSS3_新的UI方案（文本新增样式、盒模型新增样式、新增UI样式）

最新推荐文章于 2024-02-04 18:35:15 发布

原创最新推荐文章于 2024-02-04 18:35:15 发布 · 329 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #css3

CSS3 专栏收录该内容

2 篇文章

订阅专栏

本文深入讲解CSS中的文本、盒模型和UI样式的设置技巧，包括透明度调整、阴影效果、文字描边、背景模糊、圆角边框、背景图片、线性渐变和径向渐变等高级特性。

注：本文为个人经验所写，如有不懂可以参考内附资源的小示例帮助理解，如内容表达有误，欢迎提醒！

文本新增样式

1.opacity
通过改变opacity的值可以改变背景透明度
background-color: yellow;
opacity: 0.3;
它连同整个元素里面的其他元素一起变透明
				
2.rgba
background-color:rgba(0,0,0,0.3);
它是只改变某一指定背景的透明度
	
3.文字阴影text-shadow
属性：color 左右偏移量 上下偏移量 模糊程度

浮雕文字做法：
设置文字基本样式（字体大小，颜色，行高等）
设置文字的text-shadow属性，使其变成浮雕

模糊文字的做法：
设置文字基本样式（字体大小，颜色，行高等）
设置伪元素：hover的text-shadow属性
可设置元素的transition为1s，为了使变化不突兀
				   
4.溢出的文字以省略号代替	（元素必须是块元素）		   
	white-space: nowrap;
	overflow: hidden;						
	text-overflow: ellipsis;
注意：若text-overflow: clips，后面内容直接切掉
	
5.文字描边
	-webkit-text-stroke:
	
6.文本排版（必须配合bidi使用）
	direction: rtl;
	unicode-bidi: bidi-override;
	
7.背景模糊（重要）
① 写一个外层div，在其内部写入img，利用url把图片写入img中，设置img的大小
② 设置外层div的大小及背景颜色，利用rgba使背景变透明
③ 设置img的margin：24px 0 0 24px，使其在合适位置
④ 在外层div里面再创建一个内层的div作为背景图片，z-index=-1，使其下移一层，利用url将背景图片放入
⑤ 内层div开启绝对定位，设置其left，right，top，bottom均为0，使其大小和外层div相同
⑥ 设置background-size为100%，100%，使背景图片和div大小一致
⑦ 设置内层的div的filter：blur（10px），使整个元素模糊
*

盒模型新增样式

1.盒子阴影box-shadow
属性：inset（阴影往里面扩）   左右偏移量    上下偏移量   模糊程度(不能为负值)   px（阴影的大小，可以是负值） color
可叠加，用逗号叠加多个阴影
默认值不可继承
eg:box-shadow: inset 10px 10px 10px -1px yellow;
则盒子的阴影向里面，左右偏移量为10px，上下偏移量为10px,模糊程度为10px（该值不能为负值），阴影大小程度缩小为1px，阴影的颜色为黄色
	
2.盒模型阴影
-webkit-box-reflect: left 10px;
第一个属性为倒影方向，第二个属性为倒影与原图片距离

/*如何让图片img垂直水平居中*/
		第一种：（img独有方法，不动任何层，提倡使用）
		html,body,#wrap{
			height: 100%;
		}
		#wrap:after{
			content: "";
			display: inline-block;
			height: 100%;
			vertical-align:middle;
		}
		#wrap img{
			width: 100px;
			height: 100px;
			vertical-align:middle;
		}
		#wrap{
			text-align：center;
		}
		
		第二种：（块元素可以使用该方法，动层，不推荐）
		#test{
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 100px;
			height: 100px;
		}
	
3.resize（一定要配合overflow：auto；）
属性值：
both：表示div的大小可以在垂直方向和水平方向自由变换
horizontal:表示div的大小可以在水平方向自由变换
	
4.box-sizing
属性值：
① box-sizing: border-box;
若盒子设置了宽高，设置box-sizing: border-box，当该盒子padding为正值，则内容区自动缩小，盒子本来的宽高不变；
若盒子设置了宽高，但是未设置box-sizing: border-box，当盒子padding为正值，则内容区大小不变，盒子本来的宽高变为加上内边距的宽高；
② box-sizing: content-box;
盒子的宽高为内容区的宽高

新增UI样式

1.圆角border-radius(注意：在移动端开发，尽量使用px值)
设置元素的外边框圆角。不可继承。
这个(椭)圆与边框的交集形成圆角效果。
该属性是一个 简写属性，是为了将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 简写为一个属性。
即使无边框，也可以将该属性用到background上。
属性值：
① <percentage> 
在旧版本的 Chrome 和 Safari 中不支持。(fixed in Sepember 2010)
在 11.50 版本以前的 Opera 中实现有问题。
Gecko 2.0 (Firefox 4) 版本前实现不标准：水平半轴和垂直半轴都相对于盒子模型的宽度。
在旧版本的 iOS (iOS 5 之前) 和 Android 中 (WebKit 532 之前) 不支持。
② em
③ px
该值不能超过元素宽或者高中较小的值的一半
例如：
border-radius: 1em/5em;前一个值为短半轴，后一个值为长半轴
/* 等价于： */
border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

ps：风车实例：
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		#wrap{
			width: 300px;
			height: 300px;
		
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			transition: 2s;
		}
		#wrap > div{
			margin: 10px;
			width: 130px;
			height: 130px;
			border: 1px solid;
			background-color: deeppink;
			box-sizing: border-box;
			float: left;
		}
		#wrap > div:nth-child(1),#wrap > div:nth-child(4){
			border-radius: 0 70%;
		}
		#wrap > div:nth-child(2),#wrap > div:nth-child(3){
			border-radius: 70% 0;
		}
		#wrap:hover{
			transform:rotate(220deg);
		}
	</style>
</head>
<body>
	<div id="wrap">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
</body>
</html>

对话框实例：
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		#wrap{
			position: relative;
			width: 500px;
			height: 300px;
			border: 1px solid;
			border-radius: 50%;
			text-align: center;
			line-height: 300px;
		}
		#wrap:before{
			position: absolute;
			display: block;
			content: "";
			width: 50px;
			height: 50px;
			border: 1px  solid;
			right: 0px;
			bottom: 0px;
			border-radius: 50%;
		}
		#wrap:after{
			position: absolute;
			display: block;
			content: "";
			width: 20px;
			height: 20px;
			border: 1px  solid;
			right: -50px;
			bottom: -50px;
			border-radius: 50%;
		}
	</style>
</head>
<body>
	<div id="wrap">
	欢迎大家和我一起入坑前端哦！
	</div>
</body>
</html>

2.边框图片border-image（实现该样式时需要保证border-style必须出现）
border-image-source:设置边框为指定图片，该图片可以找UI要，不可继承
					若其属性值为none，则自动应用border-style样式
border-image-slice：border-image-slice属性会将图片分割为9个区域：四个角，四个边（edges）以及中心区域。四条切片线，从它们各自的侧面设置给定距离，控制区域的大小。
					属性值可以为百分数，百分比参照元素的宽高
					若设置关键字fill，则会将中间部分作为背景图像。
border-image-repeat:若属性值为repeat，则边区域铺满，但是铺满的时候样式可能接不上
					若属性值为round，则边区域铺满，铺满的时候样式在接着
border-image-width：若没有设置该宽度，则边框图片宽度为border中的宽度
					若设置该宽度，则边框图片宽度为该宽度
border-image-outset：该值只能为正值
					值越大，边框图片越往外面扩，但是其实际边框不变
					
3.css2背景
①background-color
②background-image（默认情况下背景图片从padding-box开始绘制，从border-box开始剪裁）：设置背景图片（背景图片覆盖background-color）,可以设置多个背景图片，但是需注意的是————在前面设置的背景图片覆盖在后面的背景图片
③background-repeat：设置背景图片是否在元素中平铺
④background-position：为每一个背景图片设置初始位置。
	属性值：left,right，top，bottom，center
			百分数（百分比参照于元素本身宽高减去背景图片本身宽高）
			px值
⑤background-attachment：决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动
	属性值：fixed：背景图片相对于视窗固定，滑动滚动条，内容的文字滚动，背景图片也仍然固定
			local：背景图片相对于元素内容固定，滑动滚动条，内容的文字滚动，背景图片会随着元素内容一起滚动
			scroll（默认值）：背景图片相对于元素本身固定，滑动滚动条，内容的文字滚动，背景图片在元素内不会随着内容一起滚动

4.css3背景
默认情况下背景图片从padding-box开始绘制，从border-box开始剪裁
①background-origin:设置背景图片从哪个区域开始渲染
	属性值：border-box
			content-box
			padding-box
②background-clip：设置背景图片从哪个区域开始剪裁
	属性值：border-box
			content-box
			padding-box
③background-size：设置背景图片适应元素大小
	属性值：百分数（指定背景图片相对背景区（background positioning area）的百分比，背景区由background-origin设置，默认为盒模型的内容区与内边距，也可设置为只有内容区，或者还包括边框。）			
④-webkit-background-clip:text;
设置文字部分有背景，注意要设置文字的颜色为透明		

5.线性渐变background-image：linear-gradient（）
①双颜色值的线性渐变
background-image：linear-gradient（颜色一，颜色二）
②多颜色值的线性渐变
background-image：linear-gradient（颜色一，颜色二，颜色三......）
③改变渐变方向
background-image：linear-gradient（to left，颜色一，颜色二，颜色三......）
渐变方向为从右向左
background-image：linear-gradient（45deg，颜色一，颜色二，颜色三......）
ps:角度的方向为正上方为0度，正下方为180度，以y轴分隔，左边为负值，右边为正值
④控制颜色结点的分布
background-image：linear-gradient（颜色一  px值，颜色二 px值，颜色三   px值.....）
eg：background-image：linear-gradient（90deg，red 100px，yellow 300px）表示前100px为红色，100~300px为红黄渐变，300px往后为黄色
⑤透明度渐变
和颜色渐变方法一样，只不过把颜色通过rgba（）改成透明色
⑥重复渐变（必须是渐变色的时候才能重复，纯色不可以）
background-image：repeating-linear-gradient（颜色一，颜色二，颜色三......）

6.径向渐变background-image：radial-linear-gradient（）
①颜色值的线性渐变
background-image：radial-linear-gradient（颜色一，颜色二，颜色三......）
②控制颜色结点的不均匀分布
background-image：radial-linear-gradient（颜色一  百分数，颜色二 百分数，颜色三   百分数.....）
默认以“圆心到左上角的连线”的线按照百分比分布
③改变渐变的形状
属性值：circle、elipse（默认椭圆）
background-image：radial-linear-gradient（circle，red，blue）表示渐变形状为圆形
④改变渐变形状的大小（渐变大小依据哪条线分布，默认值是最远的角）
属性值：closest-side最近边
		farthest-side最远边
		closest-corner最近角（和中心点的位置有关）
		farthest-corner最远角（和中心点的位置有关）默认值
		
⑤确定中心点的位置
at 100px 100px

如何解决ie6中fixed失效问题

ps：HTML永远都没有滚动条。
	若HTML和body均有overflow属性，则HTML的滚动条作用给视窗，body的滚动条作用其本身
	若HTML和body其中只有一个有overflow属性，则滚动条作用给视窗

具体代码如下：
html{
	height：100%；
	overflow：hidden；此时说明隐藏视窗的滚动条	
}
body{
	height：100%；
	overflow：scroll；出现的是body的滚动条，不是HTML的，所以滑动滚动条绝对定位的元素不会动
}