随笔分类 - CSS3
摘要：一、Css3 mask 修改图标颜色 （推荐） CSS3 mask默认是基于透明度实现遮罩效果的。也就是实色区域显示，透明区域隐藏。因此，我们只需要把目标图标颜色#f4615c作为背景色，然后原始图标（无论什么颜色都可以）作为遮罩图片，效果就出来了。 <!DOCTYPE html> <html la
阅读全文
摘要：一、CSS3 filter(滤镜) 1.定义 filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。 默认值: none 继承: no 动画支持: 是。详细可查阅 CSS 动画 版本: CSS3 JavaScript 语法: object.style.WebkitFilt
阅读全文
摘要：一、Css3 将网页变成黑白_Css3 网页黑白滤镜filter 重点代码： html, body { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-fil
阅读全文
摘要：一、Css Transition 过渡效果对于auto属性失效 width-auto height-auto 都不起作用。 但是对于 max-height，max-width 是可以的。 height从具体值 》具体值 的过渡变化是可以的。案例如下： <!DOCTYPE html> <html la
阅读全文
摘要：一、原理： border-radius 可以设置4个叫，8个切边的长度，控制圆角大小； 实现方案如下： 左上角、左下角小一点。 右上角、右下角：x轴80%；y轴50%。 二、实现圆角梯形 .block{ width: 100px; height: 100px; background-color: r
阅读全文
摘要：一、Css 启用浮动高度问题整理 1.Css启用浮动后，父元素高度塌陷。解决方案 使用clear增加清楚浮动来处理。 2.Css 指定高度的Div浮动，自适应的兄弟元素默认等高。想要自适应，兄弟元素使用 overflow: hidden; 二、Css浮动兄弟元素高度问题 现象： 浮动元素指定了高度，
阅读全文
摘要：一、Css Background 使用整理 背景缩写属性可以在一个声明中设置所有的背景属性。 逻辑上可以分为背景颜色、背景图片 可以设置的属性分别是：background-color、background-position、background-size、background-repeat、back
阅读全文
摘要：一、Css 伪类选择器 单个冒号: 伪类选择符 Pseudo-Classes Selectors Selectors选择符CSS Version版本Description简介 E:link CSS1 设置超链接a在未被访问前的样式。 E:visited CSS1 设置超链接a在其链接地址已被访问过时
阅读全文
摘要：一、::before / ::after 简介 ::before 和 ::after 是 CSS 中的伪类，它们基本功能是在 CSS 渲染中向元素的内容前面和后面插入内容。虽然在实际 HTML 中我们没有增加任何标签，并且会在浏览器中展现出来。 ::before和::after必须配合content
阅读全文
摘要：一、webkt浏览器进度条设置 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scrollbar-track 外层轨道 ::-webkit-scrollbar-
阅读全文
摘要：一、Css border 边框定义和使用 定义和用法 border 简写属性在一个声明设置所有的边框属性。 可以按顺序设置如下属性： border-width ： border-width 简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 只有当边框样式不是 none 时才起作用。如
阅读全文
摘要：一、矩形、长条进度条 案例1： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
阅读全文
摘要：一、Css3 实现锯齿效果 优惠券锯齿效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=
阅读全文
摘要：一、currentColor定义及理解 来自MDN的解释：currentColor代表了当前元素被应用上的color颜色值。 使用它可以将当前这个颜色值应用到其他属性上，或者嵌套元素的其他属性上。 介绍currentColor相关知识 ⑴来源于SVG，CSS3的变量，可以解决颜色属性无法继承的问题。
阅读全文
摘要：一、Css3 实现扇形 实现原理说明 使用transform skew 扭曲实现扇形角度，使用rotate宣传，实现多角度。 原理图： 二、Css3 实现六角扇形 实现案例 css代码： .circleBlock { width: 200px; height: 200px; border: 1px
阅读全文
摘要：一、Css3 实现全圆进度条展示功能1 <style> .block { width: 200px; height: 200px; background: rgb(247, 49, 49); position: relative; border-radius: 50%; } .block>.bloc
阅读全文
摘要：一、CSS3圆环旋转效果 1 原理：设置不同效果的边框，进行宣传 <div class="demo"></div> <style> .demo { width: 250px; height: 250px; border: 50px solid red; border-left-color: blue
阅读全文
摘要：一、input=text 样式处理： 在不同浏览器中 input =text 数据框的默认样式不近相同，为了呈现一致，input 的样式重写是必然选择。 /* * 字体大小 * 行高 (box-sizeing:content-box) padding: 处理 * input 框的高度 * 宽度：根据
阅读全文
摘要：一、方案一、使用border方式处理 css .block { width: 200px; height: 200px; border-left: 10px solid red; border-top: 10px solid red; border-right: 10px solid gray; b
阅读全文
摘要：最近的一个项目中要使文字垂直排列，也就是运用了CSS的writing-mode属性。 writing-mode最初时ie中支持的一个属性，后来在CSS3中增添了这一新的属性，所以在ie中和其他浏览器中的语法会有区别。 一、CSS3标准 二、实现按钮点击文字下沉效果 我们可以设置文字的writing-
阅读全文