Css
CSS边框效果
本文将详细介绍CSS边框效果 半透明边框border:10pxsolidhsla(0,0%,100%,.5);background-clip:padding-box; 缝边效果outline:1pxwhitedashed;outline-offset:-10px;border-radius:4%...
CSS背景效果
本文将详细介绍CSS背景效果 条纹背景【双条纹背景】background:linear-gradient(#fb350%,#58a50%);background-size:100%30px; CSS标准规定：如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所...
CSS3四个自适应关键字——fill-available、max-content、min-content、fit-content
一般地，有两种自适应：撑满空闲空间与收缩到内容尺寸。CSS3将这两种情况分别定义为'fill-availabel'和'fit-content'。除此之外 ，还新增了更细粒度的'min-content'和'max-content'。这四个关键字可用于设置宽高属性。本文将详细介绍CSS3中的这四个自适应关键字...
CSS中的路径裁剪样式clip-path
CSS借鉴了SVG裁剪的概念，设置了clip-path样式，本文将详细介绍路径裁剪clip-path 概述 clip-path属性可以防止部分元素通过定义的剪切区域来显示，仅通过显示的特殊区域。剪切区域是被URL定义的路径代替行内或者外部svg，或者定义路线的方法 [注意]IE浏览器不支持，且低版本w...
CSS编码技巧
本文将从DRY、currentColor、inherit和合理使用简写这几方面来详细介绍CSS编码技巧 DRY DRY，即don`trepeatyourself，尽量减少代码重复 在软件开发中，保持代码的DRY和可维护性是最大的挑战之一，而这句话对CSS也是适用的。在实践中，代码可维护性的最大要素是尽...
Vue过渡效果之CSS过渡
Vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果。本文将从CSS过渡transition、CSS动画animation及配合使用第三方CSS动画库(如animate.css)这三方面来详细介绍Vue过渡效果之CSS过渡 引入 以一个toggle按钮控制p元素显隐为例，如果不使用过渡效果...
animate.css的使用
animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。本文将详细介绍animate.css的使用 引入 animate.css的最新版本是3.5.2，引入animate.css很容易，有以下几种方法 1、从官网下载 htt...
CSS变量variable
一直以来，CSS中是没有变量而言的，要使用CSS变量，只能借助SASS或者LESS这类预编译器。新的草案发布之后，直接在CSS中定义和使用变量不再是幻想了。本文将详细介绍CSS变量variable 基本用法 CSS变量是由CSS作者定义的实体，其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置...
CSS遮罩mask
CSS遮罩是2008年4月由苹果公司添加到webkit引擎中的。遮罩提供一种基于像素级别的，可以控制元素透明度的能力，类似于png24位或png32位中的alpha透明通道的效果。本文将详细介绍CSS遮罩mask概述 遮罩mask的功能就是使用透明的图片或渐变遮罩元素的背景。于是，遮罩mask与背景backgro...
CSS命名实践
每次写HTML结构涉及到CSS命名时，都要挣扎一番。关于CSS命名的规范，市面上有不少，如OOCSS、SMACSS、BEM和MVCSS等。在这里面最火的应该算BEM了。本文将详细介绍CSS命名 主流命名【BEM】 说起CSS命名，当然要提到BEM。BEM的意思就是B模块(block)、E元素(eleme...
CSS兼容性详解
对于前端工程师来说，不想面对又不得不面对的一个问题就是兼容性。在几年之前，处理兼容性，一般地就是处理IE低版本浏览器的兼容性。而近几年，随着移动端的发展，工程师也需要注意手机兼容性了。本文将详细介绍CSS兼容性 盒模型属性【宽高width/height】(全兼容)widthheight(IE6...
CSS规范
CSS是网页样式的描述语言，CSS规范能够使CSS代码风格保持一致，使得CSS更容易理解和维护。本文将详细介绍CSS规范 代码风格【选择器】 1、选择器 与 { 之间包含空格.selector{} 2、>、+、~ 选择器的两边各保留一个空格/*good*/...
吴裕雄--天生自然HTML学习笔记：HTML 样式- CSS
CSS(CascadingStyleSheets)用于渲染HTML元素标签的样式.<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title><s...
