随笔分类 -  CSS3

1
diy 滚动条 样式 ---- 核心代码
摘要：参考自 ： https://blog.csdn.net/qq_38881495/article/details/83689721 .chapter_data position relative width 100% max-height 390px overflow hidden overflow- 阅读全文
posted @ 2019-04-23 19:05 耶梦加德 阅读(193) 评论(0) 推荐(0)
CSS3_综合案例
摘要：综合案例 设置元素的 width，还可以利用 left 和 right 为了防止图片太小，background-size: 100% 100%; <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <link 阅读全文
posted @ 2018-11-17 14:44 耶梦加德 阅读(328) 评论(0) 推荐(0)
CSS3_元素拖曳原理_设置全局点击捕获_九宫格碰撞检测_自定义滚动条
摘要：拖曳原理： 元素的初始位置 + 鼠标距离差 = 元素最终位置 使元素可以拖动 function dragElement(obj){ obj.onmousedown = function(e){ e = e || window.event; // 兼容 IE obj.setCapture && obj 阅读全文
posted @ 2018-11-16 21:17 耶梦加德 阅读(441) 评论(0) 推荐(0)
CSS3_伸缩盒模型_弹性布局_等分布局_flex 布局
摘要：伸缩盒模型 CSS3 引入的布局模式 Flexbox 布局 主要思想： 让容器有能力让其子项目能够改变其宽度，高度，以最佳方式填充可用空间。 特点： display: flex; 只能控制其子元素 浮动无法影响伸缩容器，但是如果内联伸缩容器 设置了浮动，元素将会以块级伸缩容器显示。 伸缩容器的 ma 阅读全文
posted @ 2018-11-16 14:30 耶梦加德 阅读(1865) 评论(0) 推荐(0)
CSS3_移动端_开机动画
摘要：移动端的 开机动画 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> height: 100%; overflow: hidden; 禁止滚动条 初始包含块 为 #wrap ， 阅读全文
posted @ 2018-11-15 10:46 耶梦加德 阅读(614) 评论(0) 推荐(0)
CSS3_动画 animation
摘要：在项目中，颜色，图片，等等数据都保存在数组中 动画 使元素从一种样式逐渐变化到另一种样式的 animation: name ; 无顺序要求，但是必须先写 持续时间 ，再写 延迟时间 原理 人眼在看到画面的0.34 秒内，画面不会消失 在一幅画面还没消失之前，播放下一张画面 关键帧 @keyframe 阅读全文
posted @ 2018-11-14 14:52 耶梦加德 阅读(255) 评论(0) 推荐(0)
CSS3_天猫商品墙
摘要：天猫商品墙 网格状布局： 1. ul li 布局 2. float: left; 使得元素在一行。注意： 父元素解决高度塌陷 3. ul 设置固定宽，使得元素挤下去 4. 给父元素加一个 padding-left 和 padding-top 使得 背景色缝隙 充当 网格最左边的边线 5. 给 li 阅读全文
posted @ 2018-11-14 11:59 耶梦加德 阅读(227) 评论(0) 推荐(0)
CSS3_3D 变换
摘要：3D 变换 1. 在 2D 父元素中，绕轴旋转，效果需要想象 #ele_3d { width: transform: rotateX(2deg); } rotateX 为正，元素左上角往里跑。。。对象在 x 轴上的旋转角度，正方向向右 rotateY 为正，元素左上角往外跑。。。对象在 x 轴上的旋 阅读全文
posted @ 2018-11-13 18:30 耶梦加德 阅读(338) 评论(0) 推荐(0)
CSS3_扇形导航_transitionend 事件
摘要：扇形导航 圆形按钮，切换一系列图片导航的显示与隐藏。 如果涉及过渡动画，定位的 top 和 left 必须写 Math.sin(弧度) 一圈弧度 = 2π，一圈角度 = 360 弧度 = (deg*2π)/360 = (deg*π)/180 <!DOCTYPE html> <html> <head> 阅读全文
posted @ 2018-11-13 14:49 耶梦加德 阅读(377) 评论(0) 推荐(0)
CSS3_过渡_2D 变换_瓶体旋转_动态时钟
摘要：1. 过渡 transition 允许 CSS 的属性值在一定时间内平滑的过渡， 在鼠标点击，鼠标滑过或对属性改变中触发，并圆滑的改变 CSS 的属性值 简写属性： #box { width: 300px; height: 200px; background-color: red; transiti 阅读全文
posted @ 2018-11-12 09:42 耶梦加德 阅读(262) 评论(0) 推荐(0)
CSS3_多列布局
摘要：CSS3 多列布局 可以随屏幕大小自适应布局 能够创建多个列对文本进行布局 属性 column-count: 5; 将文本分成 5 列 注意： 用户的屏幕大小 column-fill: balance / auto; 规定如何填充列 默认值 balance ，不管 height 设置多少，列始终均等 阅读全文
posted @ 2018-11-10 16:35 耶梦加德 阅读(127) 评论(0) 推荐(0)
CSS3_线性渐变_径向渐变----背景
摘要：渐变的本质： 绘制一张背景图片，所以使用 background 或者 background-image background 的诸多属性，渐变都是可以使用的（repeat，position） 百分比： 把元素渐变方向的整体长度看成 100% 线性渐变背景 使用： （至少三个参数，从第二个参数开始，都 阅读全文
posted @ 2018-11-10 12:00 耶梦加德 阅读(452) 评论(0) 推荐(0)
CSS3_盒子背景
摘要：盒子背景 盒子背景：content padding 特殊的 boder 背景 背景绘制 从 padding 开始绘制 背景裁剪 background-clip（默认值 border-box） 特殊： 在指定文字背景时 -webkit-background-clip: text; 可选值： borde 阅读全文
posted @ 2018-11-10 10:57 耶梦加德 阅读(271) 评论(0) 推荐(0)
CSS3_盒阴影_倒影_盒子大小可调
摘要：1. 盒阴影 会产生一个或者多个阴影 使用： （多个阴影，以逗号隔开） /* （不能为负值） （可以负值） */ /* 水平方向偏移量 垂直反向偏移量 模糊程度 扩散程度 颜色 是否是内阴影; */ box-shadow: 20px 20px 20px 10px yellowgreen; /* 外阴 阅读全文
posted @ 2018-11-10 10:10 耶梦加德 阅读(923) 评论(0) 推荐(0)
CSS3_文本样式
摘要：1. 文字阴影 text-shadow 使用： text-shadow: 水平方向偏移量 垂直方向偏移量 模糊程度 颜色; #box { text-shadow: 10px 10px 3px deeppink; // 1个阴影 } 多个阴影 加一个逗号 写第二个阴影的样式 #box { text-s 阅读全文
posted @ 2018-11-09 16:49 耶梦加德 阅读(286) 评论(0) 推荐(0)
CSS3_标准盒子模型和怪异盒子模型
摘要：#box{ width: 200px; height: 200px; background-color: pink; } 标准盒子模型 box-sizing: content-box; padding 是向外扩的 border 也是向外扩的 怪异盒子模型 box-sizing: border-box 阅读全文
posted @ 2018-11-09 16:12 耶梦加德 阅读(716) 评论(0) 推荐(0)
CSS3_边框 border 详解_一个 div 的阴阳图
摘要：（面试题） 怎么样通过 CSS 画一个三角形： 1. 元素的 width 和 height 设置为 0 2. 边框 足够大 3. 需要的三角形的部分， border-top-color 设置为 有色 4. 不需要的部分 border-right-color，border-bottom-color，b 阅读全文
posted @ 2018-11-09 11:57 耶梦加德 阅读(797) 评论(0) 推荐(0)
CSS_细节总结
摘要：1. 负外边距 上下200*200盒子的重叠，切记用 absolute 绝对定位 为最佳解决方案。 定位 position : fixed absolute relative( top 为 -200px ) 如果元素有文字，会覆盖元素 浮动 float ： 需要使得要浮动的元素，作为被覆盖元素的兄弟 阅读全文
posted @ 2018-10-26 09:44 耶梦加德 阅读(315) 评论(0) 推荐(0)
__x__(47)0910第六天__IE6到IE11对于包含中文路径的png显示问题
摘要：问题：IE6额外地除了中文路径外，对于png24的支持度不高，以致于无法透明。 解决方法1，png8 替换： png8 比 png24 小，质量较低，但是在这里可以替代，以解决问题。 使用 ps 打开 png24，存储为 Web 格式，选择png8 保存，然后使用。 解决方法2，js 处理： 在页面 阅读全文
posted @ 2018-09-10 16:55 耶梦加德 阅读(180) 评论(0) 推荐(0)
(18)0907_CSS选择器详解
摘要：选择器的优先级（决定那个样式生效）： important； > 内联样式 > id选择器> 类和伪类 > 元素选择器 > 通配选择器> 继承样式无优先级 最大 > 1000 > 100 > 10 > 1 > 0 > 无 （内联样式，也叫 行内样式） 在 CSS 里面定义自增函数 counter-in 阅读全文
posted @ 2018-09-07 15:50 耶梦加德 阅读(157) 评论(0) 推荐(0)

1