标签归档：CSS
利用CSS3 gradient（渐变）函数实现渐变背景
CSS3 规范定义了两种类型的渐变，分别是线性渐变（linear-gradient）、径向渐变（radial-gradient）。在这之前要实现渐变背景的效果，通常需要用图片来实现。
CSS3 渐变背景在现代浏览器中基本得到了很好的实现，在 IE10 以上版本也得到了支持。而在低版本浏览器中需要添加 -webkit-、-moz- 或 -o- 前缀才能实现渐变的效果。 继续阅读
CSS常见的自适应布局
自适应布局是在网页开发中很常见的一种布局方式，就是为了适配不同屏幕尺寸的设备，页面元素中内容主体的宽度或高度会根据浏览器窗口的大小自动调整。以下是几种自适应布局的实现：
自适应布局一：左侧宽度固定，右侧宽度自适应
HTML：
<div class="box"> <div class="left"></div> <div class="right"></div> </div>
JS获取DOM元素CSS样式的方法
CSS 样式有两种类型：
1.行内样式，即通过元素的 style 属性定义的样式。
2.非行内样式，即通过 <style> 标签或引入外部 CSS 文件定义的样式。
针对 DOM 元素的行内样式，可以从 DOM.style 样式集合中读取对应行内样式属性，如：DOM.style.width、DOM.style.height 等。而要获取非行内样式，则需要通过 window.getComputedStyle()（W3C）方法或 DOM.currentStyle（IE）当前样式集合属性去获取。 继续阅读
CSS3阴影box-shadow属性使用总结
使用 CSS3 的 box-shadow 属性，可以实现给元素添加阴影的效果。
语法：
box-shadow: offset-x offset-y blur spread color inset;
CSS选择器有哪些？
元素选择器 选择指定元素名称的 HTML 元素。
id选择器 选择具有指定 id 属性的 HTML 元素，如：“#container”选择 id 属性为 container 的元素。
类选择器 选择包含指定 class属性的 HTML 元素。如：“.box”选择 class 属性为 box 的元素。 继续阅读
CSS清除浮动的方法
将元素的 css 属性 float 的值设置为 left 或 right，把浮动方式改为左浮动或右浮动，使其脱离标准文档流，也会导致父元素高度塌陷，这时就需要清除浮动。
<div class=”box”>
<div class=”a”></div>
<div class=”b”></div>
</div>
.box {
background-color: #000;
} 继续阅读
什么是CSS盒子模型？
我们可以把HTML元素看作是一个盒子。CSS的盒子模型由外向内包含：margin（外边距）、border（边框）、padding（内边距）、content（内容）。在标准盒子模型中，width（宽度）= content（内容），但在低版本IE（IE7以下）有不一样的盒子模型，width（宽度）= border（边框）+ padding（内边距）+ content（内容），也被称为怪异盒子模型。 继续阅读
CSS中可继承/不可继承的样式属性
可以继承的样式属性：font、font-style、font-variant、font-weight、font-size、font-family、line-height、color、letter-spacing、word-spacing、white-space、text-align、text-indent、direction、visibility、cursor、list-style、list-style-type、list-style-position、list-style-image、border-collapse。
其它样式属性均不可以继承。 继续阅读