-
border-radius
圆角属性 -
box-shadow
阴影
单位%:border-radius: 30%;
单位px: border-radius: 0px 10px 50px 30px;
添加内阴影inset:box-shadow: 10px 10px 20px black inset;
-
background
background: url(img/baby_b2.jpg) no-repeat center;:背景地址 背景不重复 背景居于整个div(红色边框)的中心
(background-repeat:no-repeat;)
- 背景渐变 linear-gradient:相当于一个方法
background: linear-gradient(#003322,#ff0000,#99ff00);:默认从上到下
background: linear-gradient(to bottom right,#003322,#ff0000,#99ff00);:从左到右
background: linear-gradient(to right,#003322,#ff0000,#99ff00);:从左上到右下 - background-size: length|percentage|cover|contain;
background-size:80% 100%;: 背景占满当前标签或者父集div标签的百分比(长,宽)
background-size:200px 200px;:通过长宽的px 手动控制背景的大小
background-size:contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
background-size:cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
- background-origin
可选:content-box:按内容填充背景
border-box:按边框(背景也占满边框)
padding-box:按内边距(背景不占边框)
- overflow
overflow:hidden:溢出部分隐藏
overflow:overlay; :超出部分滑动可见
overflow:auto; : 同上
-
transform: skew(ax, ay);
单位:deg
含义:倾斜
举例:transform: skew(30deg,30deg);
点它
transform: skew(30deg,0deg); :图像y轴方向的线不动,x轴方向的线,沿着垂直方向X轴 旋转30度 -
transition属性
含义:简写属性,用于在一个属性中设置四个过渡属性。
使用:写在img中,过渡效果是img:hover
点它 -
text-shadow
含义:基础的文本阴影效果
举例:
text-shadow: 0px 0px 5px #FF0000;
水平阴影的位置:阴影 距离原字体的水平距离
垂直阴影的位置
模糊的距离:阴影的雾化度
点它 -
animation
含义:动画
举例:animation:mymove 5s infinite; (一次性设置只能是这三个属性:名字 动画持续时间 动画播放次数)
针对chrom浏览器:-webkit-animation:spread 5s infinite;
点它