css3
时间在飞飞
联系方式:18501080314 有2年音乐艺术教育行业工作经验,3年电商行业工作经验。热爱思考和实践,有4年多前端开发经历,其中3年旅游服务电商行业开发经验。性格开朗,热爱技术,有责任心,工作能力强。
展开
-
css区别margin、padding、width、height值为百分比
margin、padding设置为百分比,是相对父元素宽来说的width设置百分比是相对父元素宽来说的height设置百分比是相对父元素高来说的使用padding占位的好处就是布局不会因为图片没有加载而改变。...原创 2021-11-05 11:04:20 · 436 阅读 · 1 评论 -
今天遇到一个前端面试题 css 相关的
问题是,已知一个div的行内样式写了width:300px; 如何在外部 <style></style>标签中修改这个div的样式为200px;<div style="width:300px;"></div><style>//如何在这里吧div的width改成200px</style>用 !important 是可以的优先级 - CSS(层叠样式表) | MDN浏览器通过优先级来判断哪些属性值与一个元..原创 2021-09-14 17:01:41 · 92 阅读 · 0 评论 -
css多层边框使用多层阴影实现修改shopify 变体 商品属性 variant 修改实现
我们在开发的时候经常会需要实现很多环形嵌套,圆形嵌套,或者是多边框,多层不同颜色边框嵌套的效果。方形的可以用outline 和border来增加。但是outline在大部分的浏览器不支持圆角,只有火狐浏览器使用火狐的前缀,-moz- outline-radius遇到这种圆形嵌套,最里边的商品颜色,商品颜色的边框。选中以后的白色圆圈和白色圆圈的边框。这个时候用 box-shdow就可以完美解决这个问题。但是需要注意的是shdow阴影是占用布局空间的,所以需要用margin来撑开一下上下左右的间距。.原创 2021-08-25 17:46:11 · 438 阅读 · 1 评论 -
css 背景图旋转 只让背景图片旋转180度的实现示例
.des-item-7 .inner-box .question{ position:relative; font-size: 16px; font-family: CenturyGothic; font-weight: 400; color: #000000; cursor: pointer; } .des-item-7 .inner-box .question::after{ content:''; .原创 2021-08-25 17:09:12 · 18439 阅读 · 0 评论 -
animate.css 前端源码解析 css3重点 css重点 前端实践中的学习
这些是animation.css中比较典型的一些动画bounce在bounce.css 中 主要用到了animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 这个css属性。animation-timing-function 指定动画一个周期之内运动的速度。所以这个是用来控制值可以有 匀速 加速 什么linear , ease, ease in 什么的。还可以使用一个函数cubic-bezier(n,n,n,...原创 2020-08-13 17:30:15 · 258 阅读 · 0 评论 -
圣杯布局和双飞翼布局 为什么面试的时候总要问到?怎么掌握css布局的精髓?
圣杯和双飞翼到底做了什么圣杯布局和双飞翼布局解决的问题是相同的,就是两边顶宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。简述圣杯布局:为了让中间div内容不被遮挡,将中间div设置了左右padding-left和padding-right后,将左右两个div用相对布局position: relative并分别配合right和left属性,以便左右两栏div移动后不遮挡中间div。双飞翼布局:通过淘宝将圣杯布局的改进,改为了双飞翼布局,双飞翼布局集合了所有的css2核心的属性特原创 2020-08-03 13:10:34 · 218 阅读 · 0 评论 -
css3 3d关键点 淘宝购物节的3D效果 如何实现的 h5
规定被嵌套元素如何在 3D 空间中显示transform-style: preserve-3d;视距:(通过视距可以实现近大远小的视觉效果)这个属性也是规定 3D 元素的透视效果-webkit-perspective: 100px;视角-webkit-perspective-origin-x: center;淘宝购物节的3D效果公式:...原创 2020-08-03 10:25:12 · 235 阅读 · 0 评论 -
h5 html5 h5 页面 动画 效果 项目展示
720云VR全景平台www.720yun.comwww.h5doo.com原创 2020-08-03 09:45:55 · 765 阅读 · 0 评论 -
css3 vw rem 布局 最完整的 css重置 浏览器样式修复
http://caibaojian.com/vw-vh.html原创 2018-07-13 14:55:30 · 340 阅读 · 0 评论 -
移动端 样式重置 设置字体
因为移动端都没有微软雅黑,没有宋体,在移动端的默认字体都是无衬线字体,使用系统默认的字体所达到的视觉效果跟使用微软雅雅黑没有明显差别./* 移动端定义字体的代码 */body{font-family:Helvetica;}...原创 2018-05-28 16:09:46 · 1007 阅读 · 0 评论 -
CSS渐变之CSS3 gradient在Firefox3.6下的效果兼容使用
这是最近在公司做一个产品的官网遇到的。这是谷歌显示效果。这是兼容之后火狐的效果。贴上代码: <ul class="wifi-device"> <li><img id="wifi-watch" src="img/mkl_watch.png" alt=""></li> <li&am原创 2018-04-19 13:40:57 · 397 阅读 · 0 评论