鹏程

css3 一些样式

2016/12/19 Css 共 1726 字，约 5 分钟

这篇博客出现的 css 样式及其顺序, 和我的这个静态页面是同步的. 链接

几个有趣的样式

模糊

h1 {
    color: transparent;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

图片变黑白

img {
    filter: grayscale(100%);
    //浏览器的兼容性问题
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

calc() 的使用

calc()用法类似 函数, 能够给元素设置动态的值. 比如 width: calc(100% - 100px);

PS 如果用 + - 操作符, 要记得以空格分开, 不然不起作用.我是被坑过的. 但 * / 就不用, 不过, 我们还是保持着用 calc 的时候, 都用空格符分隔吧

.calc {
    width: 200px;
    height: 300px;
    border: 1px solid red;
}
.calc .b {
    height: 100px;
    background-color: orange;
}
.calc .c {
    height: calc(100% - 100px);
    background-color: green;
}

用 css 的 border 画三角

利用 border, 四个边框, 设置边框的宽度, 然后三个 是透明, css 代码

.triangle {
    width: 0;
    height: 0;
    border-width: 40px;
    border-style: solid;
    border-color: transparent transparent red transparent;
}

渐变的径向和线性

<p class="grandient">文字线性渐变</p>
<style>
    .grandient {
        background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 0.6)));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
</style>

一个空 div 的径向渐变等间距色标 css 代码

以下的 css 代码均只改变了 background 部分, 有几个是改了宽高, 所以就只写了 background 部分的变化

div {
    width: 100px;
    height: 100px;
    background: radial-gradient(red, yellow, rhba(30, 144, 255, 0.6));
}

指定间距色标 css 代码

div {
    background: radial-gradient(red 5%, yellow 25%, #1e90ff 50%);
}

大小 是径向渐变和线性渐变不一样的地方. 你可以用一个尺寸值来指定定义圆形或者椭圆形的大小的点. css 代码

div {
    background: radial-gradient(ellipse closest-side, red, yellow 10%, #1e90ff 50%, white);
}

其中 它的大小也可以换成 farthest-corner 渐变的尺寸为起始点到封闭盒模型最远端的起始点的距离。

重复的渐变

linear-grandient 和 radial-grandient 不支持自动重复的色标, 然而, repeating-linear-grandient 和 repeating-radial-grandient 可以实现这个功能.

重复的线性渐变 css 代码

div {
    background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
}

重复的径向渐变 css 代码

div {
    background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
}

可扩展的查看 菜鸟教程: http://www.runoob.com/css3/css3-gradients.html

文档信息

Search

    Table of Contents