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(变换)

目录
相关文章
|
8月前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
编写代码中常见问题汇总(html和css)
65 0
|
7月前
|
移动开发 前端开发 HTML5
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
|
7月前
|
编解码 前端开发
编写代码中常见问题汇总(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解决盒子塌陷;
62 5
|
前端开发 数据可视化
漏刻有时数据可视化大屏常见问题(12):CSS美化滚动条
漏刻有时数据可视化大屏常见问题(12):CSS美化滚动条
140 0
|
Web App开发 前端开发
HTML基础10--CSS常见问题
元素浮动之后 能设置宽度的话 就给元素加宽度 如果需要宽度是内容撑开 就给它里边的块元素 加上浮动; 第一块元素浮动,第二块元素加margin值等于第一块元素,在IE6下会有间隙问题; IE6下子元素超出父级宽高,会把父级的宽高撑开 p 包含 div  标签嵌套规则。
949 0
|
前端开发
14个常见的CSS技巧及常见问题
1、善用css缩写可以减少页面文件大小,提高下载速度,同时使代码简洁可读。如:div{     border-top:1px solid #cccccc;     border-left:1px solid #cccccc;     border-...
687 0
|
8天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
80 24

热门文章

最新文章