系列文章 / CSS属性和高级用法 / 总共6篇

CSS 背景混合模式

混合模式

现代浏览器令人吃惊的是尽然支持和 PhotoShop 类似的图像混合模式,喜欢摄影或是熟悉 PhotoShop 的朋友应该对这个比较了解,我们先来普及一下什么是图像的混合模式。

要理解混合模式需要理解,图层、通道、RGB模式原理。

图层 比较好理解,就是我们的图像通过一层一层的叠加,最终形成我们所看到的图像,换句话说就是拆解图像到不同图层进行编辑。 通道 一般我们在 PhotoShop 中说通道通常指的是颜色通道和 alpha 通道。

颜色通道

上面显示的是 RGB 通道, 每个通道的像素都代表这种种颜色从 0~255 之间的一个值,三个通道叠加就会形成这个图像,而 alpha 通道是一个虚拟通道,比如我们可以创建一个选区来生成一个 alpha 通道。

alpha 通道

RGB模式 RGB是光色三原色,通过对红®、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。

目前的显示器大都是采用了 RGB 颜色标准,在显示器上,是通过电子枪打在屏幕的红、绿、蓝三色发光极上来产生色彩的,目前的电脑一般都能显示32位颜色,有一千万种以上的颜色。如下图所示,假设三个灯都不开就是 0x000000 (黑色),只开红灯就是 0xff0000 (红色),三个灯都开就是 0xffffff (白色), rgb 三个值为等值的时候如 0x666666 是灰值(没有色相),RGB 模式称之为加色模式(相加成白色)。

RGB模式叠加示意图

CSS 中的混合模式是通过 background-blend-modemix-blend-mode 实现的。

阅读更多

CSS 滤镜

CSS 滤镜是功能强大的新工具,它使浏览器能实现一些图像后期处理软件的功能。滤镜属性使浏览器可以实现像模糊、图像调整,甚至下拉阴影之类的效果。

滤镜的语法很简单 :滤镜类型后面跟上滤镜 filter 属性,如模糊 blur,括号内加上它的值。

.filter {
    filter : blur(3px); 
}

高斯模糊 blur

阅读更多

CSS 多背景和渐变

设置多个背景

<body>
    <section></section>
</body>
section {
    width: 429px;
    height: 265px;
    background: url(image2.gif) no-repeat, url(image1.png);
}

上面给 section 设置了多个背景(用逗号隔开),默认第一个背景图片在最上面(image2.gif),类似的我们可以添加多个背景。

边框

CSS 的盒模型在设置 padding 和 border 的时候总是给设置的宽度增加对应的额外像素, 这样在我们设置 100% 的窗口的时候就计算起来特别麻烦,后来引入了一个 border-box 来解决这个问题。

section {
    width: 429px;
    height: 265px;
    padding : 10px;
    border : 5px solid rgb(235, 244, 246);
}

section {
    width: 429px;
    height: 265px;
    padding : 10px;
    border : 5px solid rgb(235, 244, 246);
    box-sizing : border-box; 
}

阅读更多

CSS flexbox弹性布局

初识flex

之前我们写布局都是基于浏览器的盒模型,通过浮动的方式来排列界面的,这种方式有很多浏览器的 bug 和困扰我们的问题, 而 flexbox 的出现彻底解决了这些之前被人们诟病的问题。

flexbox 是基于两个坐标轴来实现的, 类似于 Android 中的线性布局 LinearLayout, 如果我们要使一个容器成为 flexbox 就需要设置 display: flex;

flex 容器内部的元素称为 flex item, 水平轴称为 main axis, 竖直轴称为 cross axis, 大致布局如下:

基本使用

我们先来定义一个 flexbox 容器, 在里面放几个 flexitem:

<body>
    <div class="flexbox">
        <div class="flexitem">我是 DIV 标签内容</div>
        <p class="flexitem">我是 P 标签内容</p>
        <span class="flexitem">我是 SPAN 标签内容</p>
    </div>
</body>
.flexbox{
    width: 600px;
    height: 200px;
    margin: 50px auto;
    background: bisque;
}

.flexitem{
    background:brown;
    color:white;
}

阅读更多

CSS 媒体查询和响应式断点

CSS媒体查询

在 CSS 中可以区分屏幕和打印机做不同的样式处理:

<link rel="stylesheet" media="screen" href="screen.css">
<link rel="stylesheet" media="print" href="print.css">

上面代码表示 screen.css 只会在设备屏幕中起作用,而 print.css 样式表只会在打印机中起作用。

在 CSS3 中除了能区分屏幕和打印机外,还可以根据屏幕的尺寸等特征来区分。

媒体类型

描述
all用于所有设备
aural已废弃。用于语音和声音合成器
braille已废弃。 应用于盲文触摸式反馈设备
embossed已废弃。 用于打印的盲人印刷设备
handheld已废弃。 用于掌上设备或更小的装置,如PDA和小型电话
print用于打印机和打印预览
projection已废弃。 用于投影设备
screen用于电脑屏幕,平板电脑,智能手机等。
speech应用于屏幕阅读器等发声设备
tty已废弃。 用于固定的字符网格,如电报、终端设备和对字符有限制的便携设备
tv已废弃。 用于电视和网络电视

阅读更多

CSS3中的动画属性窥探

@keyframes 规则动画

box 从红色过度到黄色,间隔 5 秒。

<body>
    <div class="box"></div>
</body>
.box{
    width:100px;
    height:100px;
    animation: myfirst 5s;
}
@keyframes myfirst {
    from {
        background: red;
    }

    to {
        background: yellow;
    }
}

阅读更多