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

1.border-radius 圆角边框
2.背景
- background-size: 属性规定背景图片的尺寸。在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。几个常用的属性值 background-size:cover | contain | auto | 具体像素px | 百分比 %
- background-origin :属性规定背景图片的定位区域(背景图片可覆盖的区域)。背景图片可以放置于 content-box(内容区域)、padding-box(内边距区域) 或 border-box(边框区域)
3.盒子阴影 box-shadow 属性有五个值,分别是
- offset-x 阴影的水平偏移量;
- offset-y 阴影的垂直偏移量;
- blur-radius 模糊距离;
- spread-radius 阴影尺寸;
颜色;
其中blur-raduis和spread-raduis是可选的。
box-shadow: 0 10px 20px #469bff;
4.文本阴影效果 text-shadow 属性有四个值,分别是
- offset-x 阴影的水平偏移量;
- offset-y 阴影的垂直偏移量;
- blur-radius 模糊距离;
- 颜色
text-shadow:0 1px 0 #fafafa;
5.2D转换
transform:通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。
常用的属性值有四个
transform:ranslate(50px,100px) | rotate(360deg) | scale(1.2) | skew(20deg,30deg)
- translate():元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:transform:translate(50px,100px);值 translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。
- rotate():元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。transform:rotate(30deg);值 rotate(30deg) 把元素顺时针旋转 30 度。
- scale():元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:transform:scale(2,4);值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。
- skew():元素转动给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:transform:skew(30deg,20deg);值 skew(30deg,20deg) 围绕 X 轴把元素转动 30 度,围绕 Y 轴转动 20 度。
更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。
如果你想用Python开辟副业赚钱,但不熟悉爬虫与反爬虫技术,没有接单途径,也缺乏兼职经验
关注下方微信公众号:Python编程学习圈,获取价值999元全套Python入门到进阶的学习资料以及教程,还有Python技术交流群一起交流学习哦。
