CSS新特性(2-2)

CSS新特性(2-2)

前言

本文继续讲解CSS3其他的新特性,想看之前新特性点击这里,那么好本文正式开始。

box相关

box-shadow

CSS3新增了边框阴影效果,一共四个属性值,可以控制想要控制的块边框阴影颜色、程度以及方向。

四个属性时:x偏移量,y偏移量,阴影模糊半径,阴影颜色

三个属性三个:x偏移量,y偏移量,阴影颜色

设置insert属性:insert属性为向边框内展示阴影。

同时也可以通过,来设置多个阴影。

举例:

javascript 复制代码
<!DOCTYPE html>
<html>
<head>
  <style>
	  .normal{
		  width:100px;
		  height:100px;
		  background-color:red;
		  box-shadow:10px 10px blue,inset 10px 10px pink; 
	  }
	  .normal2{
		  width:100px;
		  height:100px;
		  background-color:red;
		  box-shadow:10px 10px 5px gray;
	  }
  </style>
</head>
<body>
	<div class="normal"></div><br><br>
	<div class="normal2"></div>
	
</body>
</html>

background背景

新增了几个背景属性,分别为
background-clip :确定背景所在区域,可以从边框、内容、内边距、默认四个方向进行选取。
background-origin :确定背景图片的对齐区域到底在哪里?默认都是左对齐,但是根据content内容左对齐还是内容+内边距左对齐,可以通过该属性设置。
background-size :控制背景图片的尺寸大小。
background:linear属性,可以设置线性渐变,如上下两个颜色渐变,左右两个颜色渐变,默认为上下渐变。

举例:

javascript 复制代码
<!DOCTYPE html>
<html>
<head>
  <style>
	  .normal{
		  width:100px;
		  height:100px;
		  background:linear-gradient(to right,#ccc,#000)
	  }
  </style>
</head>
<body>
	<div class="normal"></div><br><br>
	
</body>
</html>

rgba颜色与透明度

可以设置三个颜色属性,这些颜色属性可以是0-255数字,也可以是0-100%百分比,最后一个属性为透明度。

举例

javascript 复制代码
<!DOCTYPE html>
<html>
<head>
  <style>
	  .normal{
		  width:100px;
		  height:100px;
		  background: rgb(31 ,120 ,50);
	  }
  </style>
</head>
<body>
	<div class="normal"></div><br><br>
	
</body>
</html>

transform:rotate(Xdeg) 2D旋转

可以转换一个2D的块,单位是deg,可以是否正负值来进行方向的转换。

举例:

javascript 复制代码
<!DOCTYPE html>
<html>
<head>
  <style>
	  .normal{
		  width:100px;
		  height:100px;
		  border:1px solid gray;
		  transform: rotate(100deg);
	  }
  </style>
</head>
<body>
	<div class="normal"></div><br><br>
	
</body>
</html>

transform:tranlate 平移

可以使用translate属性进行平移,向左或者向右移动,单位是px。

举例:

javascript 复制代码
<!DOCTYPE html>
<html>
<head>
  <style>
	  .normal{
		  width:100px;
		  height:100px;
		  border:1px solid gray;
		  transform: translate(100px);
	  }
  </style>
</head>
<body>
	<div class="normal"></div><br><br>
	
</body>
</html>

使用前:

使用后:

相关推荐
昔人'13 分钟前
css使用 :where() 来简化大型 CSS 选择器列表
前端·css
昔人'15 分钟前
css `dorp-shadow`
前端·css
流***陌23 分钟前
扭蛋机 Roll 福利房小程序前端功能设计:融合趣味互动与福利适配
前端·小程序
烛阴1 小时前
用 Python 揭秘 IP 地址背后的地理位置和信息
前端·python
前端开发爱好者1 小时前
尤雨溪官宣:"新玩具" 比 Prettier 快 45 倍!
前端·javascript·vue.js
why技术1 小时前
从18w到1600w播放量,我的一点思考。
java·前端·后端
欧阳呀1 小时前
Vue+element ui导入组件封装——超级优雅版
前端·javascript·vue.js·elementui
清风徐来QCQ1 小时前
css总结
前端
天***88962 小时前
js封装一个双精度算法实现
开发语言·前端·javascript
Algebraaaaa3 小时前
什么是前端、后端与全栈开发,Qt属于什么?
开发语言·前端·qt