CSS效果常见问题

简介: 详细解答参见上篇博客问题1.如何用 div 画一个 xxxbox-shadow 无限投影 (堆叠成复杂图案)::before::after问题2.

详细解答参见上篇博客

问题1.如何用 div 画一个 xxx

box-shadow 无限投影 (堆叠成复杂图案)

::before

::after

问题2.如何产生不占空间的边框

1.box-shadow

2.outline

问题3.如何实现圆形元素(头像)

border-radius:50%

问题4.如何实现ios图标的圆角

1.将设计图形导入矢量设计软件导成 svg

2.用 clip-path:(svg)制作圆角图标

问题5.如何实现半圆、扇形等图形

border-radius 组合:1.有无边框 2.边框粗细 3.圆角半径

问题6.如何实现背景图居中显示/不重复/改变大小

background-position / background-repeat / background-size(cover/contain)

问题7.如何平移、放大一个元素(transform 跟动画没有关系)

transform:translateX(100px)

transform:scale(2)

问题8.如何实现3D效果

1.perspective:500px(指定透视角度大小)

2.transform-style:preserve-3d(选择3D效果,不然是2D效果)

3.transform:translate rotate(变换)

目录
相关文章
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
编写代码中常见问题汇总(html和css)
123 0
|
移动开发 前端开发 HTML5
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
text-indent用于首行缩进,line-height与height相同实现垂直居中;vertical-align:middle用于行内元素居中;text-align:center做水平居中;list-style:none清除列表符号;overflow:hidden隐藏溢出;background-repeat:no-repeat阻止平铺;float:left实现横排;相对定位父元素,绝对定位子元素;box-sizing调整盒子模型;用边框或overflow解决盒子塌陷;
100 5
|
前端开发 数据可视化
漏刻有时数据可视化大屏常见问题(12):CSS美化滚动条
漏刻有时数据可视化大屏常见问题(12):CSS美化滚动条
179 0
|
Web App开发 前端开发
HTML基础10--CSS常见问题
元素浮动之后 能设置宽度的话 就给元素加宽度 如果需要宽度是内容撑开 就给它里边的块元素 加上浮动; 第一块元素浮动,第二块元素加margin值等于第一块元素,在IE6下会有间隙问题; IE6下子元素超出父级宽高,会把父级的宽高撑开 p 包含 div  标签嵌套规则。
976 0
|
前端开发
14个常见的CSS技巧及常见问题
1、善用css缩写可以减少页面文件大小,提高下载速度,同时使代码简洁可读。如:div{     border-top:1px solid #cccccc;     border-left:1px solid #cccccc;     border-...
717 0
|
3月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
3月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。