随笔分类 - 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伪类定义: 伪类用于定义元素的特殊状态。 例如,它可以用于: 设置鼠标悬停在元素上时的样式 为已访问和未访问链接设置不同的样式 设置元素获得焦点时的样式 一、Css 伪类选择器 单个冒号: 伪类选择符 Pseudo-Classes Selectors Selectors选择符CSS Versi
阅读全文
摘要:一、::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-
阅读全文