CSS效果小结

简介: 效果属性1.box-shadow(盒子阴影)示例加上 box-shadow内阴影复杂例子阴影的形状跟原来的形状是一样的 结果:box-shadow 作用:1.

效果属性

1.box-shadow(盒子阴影)

示例

加上 box-shadow

内阴影

复杂例子

阴影的形状跟原来的形状是一样的

 

结果:

box-shadow 作用:1.营造层次感(立体感)2.充当没有宽度的边框(没有大小,不会占据位置)3.特殊效果

 

2.text-shadow(文本阴影)

作用:1.立体感  2.印刷品质感(边缘有模糊效果)

比较:

3.border-radius

圆角矩形

圆形

半圆/扇形

只有左上角,其余均为 0,若删掉 border 属性,则为扇形

椭圆

10px 和 20px 分别为 x轴 和 Y轴 的半径,设置椭圆

4.background

 多背景叠加、渐变制作图案和纹理

雪碧图动画

鼠标放到上面会上下进行切换

背景图尺寸适应

背景覆盖整个容器(cover),同时整个长宽比不会变,超出部分会隐藏

5.clip-path(按路径进行裁剪)

对容器进行裁剪

圆形裁剪

常见的几何图形进行裁剪

支持动画

自定义路径裁剪

6.3D 变换

 变换 transform

 

位移/缩放/斜切/旋转

3D 变换

 效果:

目录
相关文章
|
7月前
|
前端开发
|
7月前
|
前端开发
|
4月前
|
存储 并行计算 前端开发
CSS Transitions(一)
CSS Transitions(一)
|
4月前
|
前端开发 JavaScript Java
CSS Transitions(二)
CSS Transitions(二)
|
6月前
|
前端开发
|
8月前
|
前端开发
CSS中的::after ::before
CSS中的::after ::before
57 0
|
8月前
|
Web App开发 存储 前端开发
|
Web App开发 前端开发
常用 CSS(上)
常用 CSS(上)
97 0
常用 CSS(上)
|
前端开发 JavaScript
CSS-1
1-CSS初识 01-CSS定义 英文全名:cascading style sheets 层叠样式表 WEB标准中的表现标准语言,简单说就是如何修饰 网页信息 的显示样式。 目前推荐遵循的是W3C发布的CSS3.0 1998年5月21日由w3C正式推出的CSS2.0
CSS-1
|
前端开发 容器
CSS总结(下)
CSS总结(下)
110 0
CSS总结(下)