page contents

css3新增的属性有哪些?列举5个看看

1.border-radius 圆角边框 2.背景 background-size: 属性规定背景图片的尺寸。在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们...

attachments-2021-05-J30SkIjN60a37032e3626.png

1.border-radius 圆角边框

2.背景

  1. background-size: 属性规定背景图片的尺寸。在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。几个常用的属性值 background-size:cover | contain | auto |  具体像素px  |  百分比 %
  2. background-origin :属性规定背景图片的定位区域(背景图片可覆盖的区域)。背景图片可以放置于 content-box(内容区域)、padding-box(内边距区域) 或 border-box(边框区域)

3.盒子阴影 box-shadow 属性有五个值,分别是

  1. offset-x 阴影的水平偏移量;
  2. offset-y 阴影的垂直偏移量;
  3. blur-radius 模糊距离;
  4. spread-radius 阴影尺寸;

颜色;

其中blur-raduis和spread-raduis是可选的。

box-shadow: 0 10px 20px #469bff;

4.文本阴影效果 text-shadow 属性有四个值,分别是

  1. offset-x 阴影的水平偏移量;
  2. offset-y 阴影的垂直偏移量;
  3. blur-radius 模糊距离;
  4. 颜色

text-shadow:0 1px 0 #fafafa;

5.2D转换 

transform:通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。

常用的属性值有四个

transform:ranslate(50px,100px)  |   rotate(360deg)   |   scale(1.2)   |   skew(20deg,30deg)

  1. translate():元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:transform:translate(50px,100px);值 translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。
  2. rotate():元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。transform:rotate(30deg);值 rotate(30deg) 把元素顺时针旋转 30 度。
  3. scale():元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:transform:scale(2,4);值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。
  4. skew():元素转动给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:transform:skew(30deg,20deg);值 skew(30deg,20deg) 围绕 X 轴把元素转动 30 度,围绕 Y 轴转动 20 度。

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

如果你想用Python开辟副业赚钱,但不熟悉爬虫与反爬虫技术,没有接单途径,也缺乏兼职经验
关注下方微信公众号:Python编程学习圈,获取价值999元全套Python入门到进阶的学习资料以及教程,还有Python技术交流群一起交流学习哦。

attachments-2022-06-Whgw1Vor62ac1395b9aab.jpeg

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
轩辕小不懂
轩辕小不懂

2403 篇文章

作家榜 »

  1. 轩辕小不懂 2403 文章
  2. 小柒 1470 文章
  3. Pack 1135 文章
  4. Nen 576 文章
  5. 王昭君 209 文章
  6. 文双 71 文章
  7. 小威 64 文章
  8. Cara 36 文章