使用RGBa和Filter实现不影响子元素的CSS透明背景
点击查看原文问题如果我们想要一个元素拥有半透明的背景，我们有两个选择：使用CSS和 opacity 做一张 24-bit PNG 背景图片在CSS中使用opacity有两个问题，一是为了适应所有的浏览器，我们要对付opacity讨厌的语法；二是opacity不仅使目标元素的背 景变得半透明，而且使它...
tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。
简要教程tween.js是一款可生成平滑动画效果的js动画库。相关的动画库插件还有：snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件。tween.js允许你以平滑的方式修改元素的属性值。你只需要告诉tween你想修改什么值，以及动画结束时它的最终值是...
前端初学者的 CSS 入门
文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 CSS 的部分，瑶琴会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。 从这篇文章开始，瑶琴带着大家一起学习 CSS 的知识，如果把 HTML 比喻成一棵树的枝干，那么 CSS 就是枝干上的树...
css选择器万年不变的优先级和权重
我们在使用CSS对网页元素定义样式时经常会遇到这种情况：要对一般元素应用一般样式，然后在更特殊的元素上覆盖它们。那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢？在CSS中，会根据选择器的特殊性来决定所定义的样式规则的次序，具有更特殊选择器的规则优先于具有一般选择器的规则，如果...
Css3渐变实例Demo（一）
1.指定渐变背景的大小.div { background: url(../img/1.jpg); /*background-size:contain;*/ width: 500px; height: 100px;}.divOne { width: 100%; he...
理解CSS边框border
前面的话 边框是CSS盒模型属性中默默无闻的一个普通属性，CSS3的到来，但得边框属性重新焕发了光彩。本文将详细介绍CSS边框基础样式 边框是一条以空格分隔的集合样式，包括边框粗细(边框宽度)、边框颜色和边框样式，且先后顺序无关 border: border-width border-co...
重温CSS：Border属性
边界是众所周知的，有什么新的东西吗？好吧，我敢打赌，在这篇文章中，有很多你不看永远不知道的东西！不仅可以用CSS3来创建圆角，使用原有CSS一样可以显示自定义图形。这是正确的（有待考究）；在过去，没发现这种技术之前，我们可能使用背景图像定位来显示一个园或箭头。幸运的是，我们能放下PS图象处理软件了。...
CSS之border绘制三角形
用CSS的border可以画出高质量的三角形。我们一般会这么使用border:#test-border { width: 100px; height: 100px; margin: 100px auto; background: #fff; border: 2px so...
CSS 的 border 样式
制作过网页的人都有为画线而烦恼的经历，先来认识一下“Border”（画边框），它是CSS的一个属性，用它可以给能确定范围的HTML标记（如TD、DIV等等）画边框，它可以定义边框线的类型、宽度和颜色，利用这个特性，可以制作一些特殊效果。下面把通过实例来说明其应用技巧。1、给文本加边框 上面的示例中...
利用css的border实现画三角形思路原理
1、利用Css 的border绘制三角形的原理：div的border是有宽度和颜色的，当div的宽度比较大的时候，比如上面代码每个边100像素，颜色又不一样，浏览器怎么渲染颜色呢？经测试发现，宽度较大的border相交时：1、只有相邻边才会相交，对边是不可能相交的2、相交区域(显然是矩形)按对角线划...
7件你不知道但可以用CSS做的事
不管你信不信，CSS和JavaScript开始重叠，就像CSS增加了更多功能一新。在我写“你可能不知道的CSS和JavaScript互相影响的5种方式”一文时，人们对于JavaScript和CSS是如何重叠的感到惊讶。今天，我将重点强调你能用CSS完成的7种工作——不需要通过JavaScript或图...
1.3 Java全栈开发前端+后端（全栈工程师进阶之路）-前置课程CSS，看这一篇就够了
前面我们已经讲了前端三剑客中的html和JavaScript，那么现在我们来看一下CSS CSS核心 0、清除默认样式 * { /* 清除默认样式 */ margin: 0; padding: 0;} 1、尺寸操作-内外边距 .box { /* 尺寸操作 */ /* 宽...
CSS实现垂直居中的5种方法
利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。(可以看看测试页面，有简短解...
[转]-CSS 元素垂直居中的6种方法
原文地址：http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/利用CSS进行元素的水...
CSS实现水平垂直居中的数种方法整合
CSS实现水平垂直居中可以说是前端老生常谈的问题了，一般面试官问的时候面试者都会回答出来，但是继续追问还有没有其他方法的时候有可能就说不出来了。本着学习知识的目的，特在此纪录CSS实现水平垂直居中的多种方法。准备工作我们先写一个简单的HTML文件，方便我们接下来进行效果实现<!DOCTYPE ...
CSS子元素在父元素中水平垂直居中的几种方法
1. 水平居中(margin: auto;)子父元素宽度固定，子元素上设置 margin: auto; 子元素不能设置浮动，否则居中失效。 #div1{ width: 300px; height: 300px; bord...
CSS水平垂直居中的几种方法2
直接进入主题！一、脱离文档流元素的居中方法一：margin:auto法CSS代码：div{ width: 400px; height: 400px; position: relative; border: 1px solid #465468; } img{ ...
顽石系列：CSS实现垂直居中的五种方法
顽石系列：CSS实现垂直居中的五种方法方法一:Vertical-Align法我们使用 vertical-align:middle 来实现元素垂直居中。CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。我们可以把div...
CSS 水平垂直居中的几种实现方法
前言项目中经常碰到需要实现水平垂直居中的样式。下面就总结几种常用的方法水平对齐+行高【思路一】text-align + line-height实现单行文本水平垂直居中<style> .f10 .test{ text-align: center; line...
css-过渡
css过渡：元素从一种样式逐渐改变为另一种的效果。过渡所需的条件：1.所过渡的元素必须有css样式。2.必须有过渡时间。以下是过渡元素的属性：transition:简写属性，用于在一个属性中设置四个过渡属性。transition-property:规定应用过渡的 CSS 属性的名称。transiti...