CSS新特性（2-2）
前言
本文继续讲解CSS3其他的新特性，想看之前新特性点击这里，那么好本文正式开始。
box相关
box–shadow
CSS3新增了边框阴影效果，一共四个属性值，可以控制想要控制的块边框阴影颜色、程度以及方向。
四个属性时：x偏移量，y偏移量，阴影模糊半径，阴影颜色
三个属性三个：x偏移量，y偏移量，阴影颜色
设置insert属性：insert属性为向边框内展示阴影。
同时也可以通过，来设置多个阴影。
举例：
<!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属性，可以设置线性渐变，如上下两个颜色渐变，左右两个颜色渐变，默认为上下渐变。
举例：
<!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%百分比，最后一个属性为透明度。
举例
<!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，可以是否正负值来进行方向的转换。
举例：
<!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。
举例：
<!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>
原文地址:https://blog.csdn.net/lplovewjm/article/details/134613174
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_13361.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
