博客

前端干货 – 实用 CSS BACKGROUND 属性使用手册

background 属性是CSS中用于设置元素背景的属性,最简单的background属性名,是针对背景若干设定的合并简写,最早的CSS只能使用单一背景图片,而在现在却可以设置多个背景图片。而不用图片的话,最早的background只能使用纯色填充,现在却可以使用各种渐变效果。现在所用的模型来自于CSS Backgrounds and Borders Module Level 3所定义的规范,主要分成了8个子属性。

背景颜色之 background-color

background-color 是最早,最古老,最…常用的属性之一,取值是唯一的,颜色值。

背景图片之 background-image

background-image顾名思义是设置背景“图片”的,这里的图片并非我们通常意义上理解的“图片”,而是由CSS Image Values and Replaced Content Module所规定的一系列内容,用以替代CSS2中所规定的background-image属性与list-style-image属性中的url参数,或者作为伪元素content的值。现在浏览器也没有完全实现这些,可用的包括url()引用图片,和渐变“图片”,然后以逗号分隔所有图片(如果有)。

阅读全文

标准
博客

纯 CSS 绘制三角形(各种角度)

我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。以下是流行的 CSS 三角形绘制方法。

上三角

#triangle-up {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 100px solid red;
 }

下三角

#triangle-down {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-top: 100px solid red;
}

阅读全文

标准