css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果

wangjie 2020-02-02

css3背景图像相关

兼容性：IE9+

background-clip  背景图片绘制区域

background-clip:border-box; 内容区

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:url(source/p3.jpg) center;
        padding:50px;
        border:50px solid transparent;
        background-clip:content-box;
        /*background-clip:padding-box;*/
        /*background-clip:border-box;*/
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果

 background-clip:padding-box; padding区域

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:url(source/p3.jpg) center;
        padding:50px;
        border:50px solid transparent;
        background-clip:padding-box;
        /*background-clip:border-box;*/
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果

 background-clip:border-box;  border区域

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:url(source/p3.jpg) center;
        padding:50px;
        border:50px solid transparent;
        background-clip:border-box;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果

 background-origin: content-box | padding-box | border-box;  背景图片起始位置

背景图片从border-box开始水平垂直向下偏移50px

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:url(source/p3.jpg) 50px 50px no-repeat;
        padding:50px;
        border:50px solid transparent;
        background-origin:border-box;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果

 背景图片从padding-box开始水平垂直向下偏移50px

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:url(source/p3.jpg) 50px 50px no-repeat;
        padding:50px;
        border:50px solid transparent;
        background-origin:padding-box;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果

 背景图片从content-box开始水平垂直向下偏移50px

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:url(source/p3.jpg) 50px 50px no-repeat;
        padding:50px;
        border:50px solid transparent;
        background-origin:content-box;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果

 background-size: 填写数值或者百分比时，如果只填写一个值，另一个值默认为auto

cover 等比缩放填满容器

contain 等比缩放至一边碰到容器边

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:url(source/p2.jpg) 50px 50px no-repeat;
        background-size:100%;/*宽度为容器宽度的100%，高度按图片比例来*/
        background-size:100% 100%;/*宽度为容器宽度的100%，高度为容器高度的100%*/
        background-size:cover;
        background-size:contain;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

多重背景图片

background-image:url(),url();

前面的图片会覆盖后面的图片

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background-image:url(source/shuiyin.png), url(source/cat.jpg);

    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果

 颜色设置为透明：transparent

css3渐变

兼容性：IE10

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:-webkit-linear-gradient(pink, orange, #abcdef);/*默认是垂直方向*/
        background:   -moz-linear-gradient(pink, orange, #abcdef);/*默认是垂直方向*/
        background:     -o-linear-gradient(pink, orange, #abcdef);/*默认是垂直方向*/
        background:        linear-gradient(pink, orange, #abcdef);/*默认是垂直方向*/

        background:-webkit-linear-gradient(left, pink, orange, #abcdef);/*从左到右*/
        background:   -moz-linear-gradient(right, pink, orange, #abcdef);
        background:     -o-linear-gradient(right, pink, orange, #abcdef);
        background:        linear-gradient(to right, pink, orange, #abcdef);

        background:-webkit-linear-gradient(left top, pink, orange, #abcdef);/*从左上到右下*/
        background:   -moz-linear-gradient(right bottom, pink, orange, #abcdef);
        background:     -o-linear-gradient(right bottom, pink, orange, #abcdef);
        background:        linear-gradient(to right bottom, pink, orange, #abcdef);
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果

 正常情况下线性渐变的角度

css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果

webkit内核下线性渐变的角度

css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果

 解决方法：兼容浏览器的前缀按顺序书写，正常情况下无前缀的放在最后

颜色可以具体分配位置

第一个颜色不写默认是0%的位置；最后一个颜色默认是100%的位置

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:-webkit-linear-gradient(45deg, pink, orange, #abcdef);/*具体角度表示*/
        background:   -moz-linear-gradient(45deg, pink, orange, #abcdef);
        background:     -o-linear-gradient(45deg, pink, orange, #abcdef);
        background:        linear-gradient(45deg, pink, orange, #abcdef);

        background:-webkit-linear-gradient(90deg, orange, pink 30%, purple 70%, #abcdef);
        background:   -moz-linear-gradient(90deg, orange, pink 30%, purple 70%, #abcdef);
        background:     -o-linear-gradient(90deg, orange, pink 30%, purple 70%, #abcdef);
        background:        linear-gradient(90deg, orange, pink 30%, purple 70%, #abcdef);
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果

rgba() 可以设置带透明色的渐变

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:-webkit-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1));/*具体角度表示*/
        background:   -moz-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1));
        background:     -o-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1));
        background:        linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1));

    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果

 重复渐变

repeating-linear-gradient

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:-webkit-repeating-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) 20%);
        background:   -moz-repeating-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) 20%);
        background:     -o-repeating-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) 20%);
        background:        repeating-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) 20%);

    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果

 径向渐变 radial-gradient

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 400px;
        height: 200px;
        border-radius:50%;
        background:-webkit-radial-gradient(pink, #abcdef);
        background:   -moz-radial-gradient(pink, #abcdef);
        background:     -o-radial-gradient(pink, #abcdef);
        background:        radial-gradient(pink, #abcdef);
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果

 保持圆形渐变

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 400px;
        height: 200px;
        border-radius:50%;
        background:-webkit-radial-gradient(circle, pink, #abcdef);
        background:   -moz-radial-gradient(circle, pink, #abcdef);
        background:     -o-radial-gradient(circle, pink, #abcdef);
        background:        radial-gradient(circle, pink, #abcdef);
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果

 尺寸大小 closest-side  closest-corner  farthest-side  farthest-corner

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 200px;
        height: 100px;
        border-radius:50%;
        margin-bottom:50px;
        line-height: 100px;
        text-align: center;
/*        background:-webkit-radial-gradient(circle, pink, #abcdef);
        background:   -moz-radial-gradient(circle, pink, #abcdef);
        background:     -o-radial-gradient(circle, pink, #abcdef);
        background:        radial-gradient(circle, pink, #abcdef);*/
    }
    div:nth-child(1){
        background:-webkit-radial-gradient(closest-side circle, pink, #abcdef);
        background:   -moz-radial-gradient(closest-side circle, pink, #abcdef);
        background:     -o-radial-gradient(closest-side circle, pink, #abcdef);
        background:        radial-gradient(closest-side circle, pink, #abcdef);
    }
    div:nth-child(2){
        background:-webkit-radial-gradient(closest-corner circle, pink, #abcdef);
        background:   -moz-radial-gradient(closest-corner circle, pink, #abcdef);
        background:     -o-radial-gradient(closest-corner circle, pink, #abcdef);
        background:        radial-gradient(closest-corner circle, pink, #abcdef);
    }
    div:nth-child(3){
        background:-webkit-radial-gradient(farthest-side circle, pink, #abcdef);
        background:   -moz-radial-gradient(farthest-side circle, pink, #abcdef);
        background:     -o-radial-gradient(farthest-side circle, pink, #abcdef);
        background:        radial-gradient(farthest-side circle, pink, #abcdef);
    }
    div:nth-child(4){
        background:-webkit-radial-gradient(farthest-corner circle, pink, #abcdef);
        background:   -moz-radial-gradient(farthest-corner circle, pink, #abcdef);
        background:     -o-radial-gradient(farthest-corner circle, pink, #abcdef);
        background:        radial-gradient(farthest-corner circle, pink, #abcdef);
    }
</style>
</head>
<body>
    <div>closest-side</div>
    <div>closest-corner</div>
    <div>farthest-side</div>
    <div>farthest-corner</div>
</body>
</html>

css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果

 设置渐变的圆心位置

水平方向为宽度的10%，垂直方向为高度的20%

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 200px;
        height: 100px;
        margin-bottom:50px;
        line-height: 100px;
        text-align: center;
/*        background:-webkit-radial-gradient(circle, pink, #abcdef);
        background:   -moz-radial-gradient(circle, pink, #abcdef);
        background:     -o-radial-gradient(circle, pink, #abcdef);
        background:        radial-gradient(circle, pink, #abcdef);*/
    }
    div:nth-child(1){
        background:-webkit-radial-gradient(10% 20%, closest-side circle, pink, #abcdef);
        background:   -moz-radial-gradient(10% 20%, closest-side circle, pink, #abcdef);
        background:     -o-radial-gradient(10% 20%, closest-side circle, pink, #abcdef);
        background:        radial-gradient(10% 20%, closest-side circle, pink, #abcdef);
    }
    div:nth-child(2){
        background:-webkit-radial-gradient(10% 20%, closest-corner circle, pink, #abcdef);
        background:   -moz-radial-gradient(10% 20%, closest-corner circle, pink, #abcdef);
        background:     -o-radial-gradient(10% 20%, closest-corner circle, pink, #abcdef);
        background:        radial-gradient(10% 20%, closest-corner circle, pink, #abcdef);
    }
    div:nth-child(3){
        background:-webkit-radial-gradient(10% 20%, farthest-side circle, pink, #abcdef);
        background:   -moz-radial-gradient(10% 20%, farthest-side circle, pink, #abcdef);
        background:     -o-radial-gradient(10% 20%, farthest-side circle, pink, #abcdef);
        background:        radial-gradient(10% 20%, farthest-side circle, pink, #abcdef);
    }
    div:nth-child(4){
        background:-webkit-radial-gradient(10% 20%, farthest-corner circle, pink, #abcdef);
        background:   -moz-radial-gradient(10% 20%, farthest-corner circle, pink, #abcdef);
        background:     -o-radial-gradient(10% 20%, farthest-corner circle, pink, #abcdef);
        background:        radial-gradient(10% 20%, farthest-corner circle, pink, #abcdef);
    }
</style>
</head>
<body>
    <div>closest-side</div>
    <div>closest-corner</div>
    <div>farthest-side</div>
    <div>farthest-corner</div>
</body>
</html>

css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果

 repeating-radial-gradient 重复径向渐变

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 200px;
        height: 100px;
        margin-bottom:50px;
        line-height: 100px;
        text-align: center;
        background:-webkit-repeating-radial-gradient(circle, pink, #abcdef 20%);
        background:   -moz-repeating-radial-gradient(circle, pink, #abcdef 20%);
        background:     -o-repeating-radial-gradient(circle, pink, #abcdef 20%);
        background:        repeating-radial-gradient(circle, pink, #abcdef 20%);
    }

</style>
</head>
<body>
    <div></div>
</body>
</html>

css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果

 IE浏览器渐变

IE10+ 支持gradient 渐变

IE6-8 使用filter

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 200px;
        height: 100px;
        margin-bottom:50px;
        line-height: 100px;
        text-align: center;
        background:-webkit-repeating-radial-gradient(circle, pink, #abcdef 20%);
        background:   -moz-repeating-radial-gradient(circle, pink, #abcdef 20%);
        background:     -o-repeating-radial-gradient(circle, pink, #abcdef 20%);
        background:        repeating-radial-gradient(circle, pink, #abcdef 20%);
        filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=pink,endcolorstr=#abcdef,gradientType=1);
    }

</style>
</head>
<body>
    <div></div>
</body>
</html>

css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果

使用IE控制台可切换IE浏览器版本

IE filter  

0 从左到右线性渐变

1 从上到下线性渐变

实际案例：

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 600px;
        height: 300px;
        background-color:#abcdef;
        background-size:100px 100px;
        background-image:-webkit-linear-gradient(45deg, pink 25%, transparent 25%),
                         -webkit-linear-gradient(-45deg, pink 25%, transparent 25%),
                         -webkit-linear-gradient(45deg, transparent 75%, pink 75%),
                         -webkit-linear-gradient(-45deg, transparent 75%, pink 75%);
        background-image:-moz-linear-gradient(45deg, pink 25%, transparent 25%),
                         -moz-linear-gradient(-45deg, pink 25%, transparent 25%),
                         -moz-linear-gradient(45deg, transparent 75%, pink 75%),
                         -moz-linear-gradient(-45deg, transparent 75%, pink 75%);
        background-image:-o-linear-gradient(45deg, pink 25%, transparent 25%),
                         -o-linear-gradient(-45deg, pink 25%, transparent 25%),
                         -o-linear-gradient(45deg, transparent 75%, pink 75%),
                         -o-linear-gradient(-45deg, transparent 75%, pink 75%);
        background-image:linear-gradient(45deg, pink 25%, transparent 25%),
                         linear-gradient(-45deg, pink 25%, transparent 25%),
                         linear-gradient(45deg, transparent 75%, pink 75%),
                         linear-gradient(-45deg, transparent 75%, pink 75%);
    }

</style>
</head>
<body>
    <div></div>
</body>
</html>

css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果

wangjie

wangjie

相关推荐

CSS(Cascading Style Sheets)样式更改——过渡、动画

元素从一种样式逐渐改变为另一种的样式。cubic-bezier在cubic-bezie函数中定义自己的值，可能的值是0至1之间的数值

Ladyseven / 0评论 2020-10-22

如何掌握正则表达式这一开发利器，看这篇就够了

正则表达式具有伟大技术发明的一切特点，它简单、优美、功能强大、妙用无穷。对于很多实际工作来讲，正则表达式简直是灵丹妙药，能够成百倍地提高开发效率和程序质量。表示数字、大小写字母和下划线。表示空白符，包括空格、水平制表符、垂直制表符、换行符、回车符、换页符。

luofuIT成长记录 / 0评论 2020-09-22

测试高手进阶之路：接口测试用好“变量”，重复验证也不怕

在API的测试中，有时候需求是对整个文件进行检验而不是某个特定的值，或者说要对某个特定的值在不同的用例中重复地进行验证。这种状况下，我们最喜欢用的就是变量。可以存取外部数据或定义内部变量，使代码变得简洁、又有可阅读性，同时测试用例结果运行也能保持一致性。代

Mynamezhuang / 0评论 2020-09-18

css 背景图片路径问题

background-size: 宽 高 | cover 完全覆盖 | contain 宽高自动调节

zhanghaibing00 / 0评论 2020-08-17

提升布局能力！理解 CSS 的多种背景及使用场景和技巧

如果你还了解 CSS background 属性，可以去先 MDN 查看相关的知识。background-clip, background-color, background-image, background-origin, background-po

李鴻耀 / 0评论 2020-08-17

左右切换css，html

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="

yaodilu / 0评论 2020-08-03

webp格式图片转换为jpg

# 这里url是你需要下载的图片地址

jusewe / 0评论 2020-07-04

C++并发编程实战：如何为多线程性能设计数据结构？

在8.1节中我们看到了在线程间划分工作的一些方法,在8.2节中我们看到了影响代码性能的一些因素。当设计多线程性能的数据结构的时候如何使用这些信息呢?这是在第6章和第7章中处理的很困难的问题,是关于设计可以安全并行读取的数据结构。当为多线程性能设计你的数据结

zhoujiyu / 0评论 2020-06-28

jQuery基础及选择器（二）

同辈元素选择器$.css;$.css;//a标签带有class属性。<input name="show" type="button" value="显示隐藏的P元素" id="s

89510194 / 0评论 2020-06-27

css条纹背景样式、及方格斜纹背景的实现

上面代码表示整个图片的上部分20%和下部分20%是对应的纯色，只有中间的部分是渐变色。如果让中间的部分逐渐缩小，当中间部分变为0即上下两种颜色的七点和终点相同是，就没有了渐变而变成了两种颜色的色条:. 注意还需颠倒background-size长宽的设定。

CaiKanXP / 0评论 2020-06-13

css 问题集

background-image: url(‘路径‘);background-repeat:no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;bkɡra?nd]详细X. v

MaureenChen / 0评论 2020-06-12

CSS3的过渡效果，使用transition实现鼠标移入/移出效果

在css中使用伪类虽然实现了样式的改变，但由于没有过渡效果会显得很生硬。以前如果要实现过渡，就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡功能，就可以从一组样式平滑的切换到另一组样式。下面鼠标移入后，按钮背景色会慢慢地变成黄色。鼠标离开，过

Phoebe的学习天地 / 0评论 2020-06-07

css常用的简写技巧_css background简写、css border 简写、css font属性简写等

css样式中有很多简写方式，比如：设置背景，字体，边框，盒子等。我们都可以把css代码合并为一行，这篇文章将总结有哪些属性支持css简写。font:normal small-caps bold 14px/1.5em ‘宋体‘,arial,verdana;d

淡风wisdon大大 / 0评论 2020-06-06

css的文字颜色渐变

在css中，有盒子背景图片颜色渐变，但是文字颜色渐变确很少提及，主要还是目前浏览器的支持程度还不高，只有在Safari和chrome能起作用

buttonChan / 0评论 2020-06-06

在右键菜单中添加\"在此处打开CMD窗口\"

删除这些注册表项时，将该文件中的以下内容进行修改，然后重新合并到注册表即可。

xiaobater / 0评论 2020-06-01

字体渐变

<div>关于<span style="background: linear-gradient; -webkit-background-clip: text;color:transparent;">我们</

xtuhcy / 0评论 2020-05-20

我发现了7个关于 CSS backgroundImage 好用的技巧

背景图像可能是我们所有前端开发人员在我们的职业生涯中至少使用过几次的CSS属性之一。大多数人认为背景图像不可能有任何不寻常的地方，但经过研究，答案并非如此。所以本文收集了七个我认为最有用的技巧，并创建了一些代码示例。如果我想在背景中添加一张以上的图片怎么办

AlisaClass / 0评论 2020-05-18

Windows 10右键添加 \"在此处打开命令窗口\" 菜单

第二种是在 桌面/文件夹窗口中/选中文件夹上按住Shift键点击右键，同时显示“在此处打开命令窗口”和“在此处打开Powershell窗口”两个选项，如图：。新建一个文本文件，编码格式保存为ANSI，否则显示中文会乱码，修改后缀为reg格式，命名为Open

赵家小少爷 / 0评论 2020-05-16

CSS - checkbox 样式

content:‘‘;position:absolute;top:8px;width:22px;height:22px;background:#fff;border:1pxsolid#e6e6e6;z-index:1;content:‘‘;position

nicepainkiller / 0评论 2020-05-05

CSS变形、动画实现的旋转魔方

<!DOCTYPE html>. height: 100vh;width: 100vw;/* background-image: url(../img/rubick.jpeg); */. margin: 0;paddin

yaodilu / 0评论 2020-04-30

Stylus 之 网教通直播间整修

box-shadow: #0000 0 0 0, #0003 0 0 15px inset;._3nDyqZHz8W > div > div[data-reactid*="$track"]:hover > div {

前端工程师喻文强 / 0评论 2020-04-27

Hexo-next主题配置

打开文档下themes\next\source\css\ _custom\custom.styl文件，这个是Next故意留给用户自己个性化定制一些样式的文件，添加以下代码：。// Custom styles.body { background:url; b

只有代码的世界 / 0评论 2020-04-27

Python学习第63天（css选择器、伪类）

　　css，暂时把他比作给html加各种花里胡哨东西的插件。　　那么如果你要使用css给您的html增加一些东西，你必须得先导入他，怎么操作呢？　　　　1.直接就在你的原有标签中增加style属性，用键值对去描述他。　　　　　　<p style=&q

冰蝶 / 0评论 2020-04-26

css背景属性

规定要使用的背景颜色。规定背景图像是否固定或者随着页面的其余部分滚动。背景图像将仅显示一次。规定应该从父元素继承background-repeat属性的设置。top left top center top right center left cen

vavid / 0评论 2020-04-21

曾经在html中编写网页的时候

<link rel="stylesheet" type="text/css" href="css/css.css"/> 将外部的css样式表链接到网页中，其它像：background-

nicepainkiller / 0评论 2020-04-17

c（css 精灵）

简单来讲就是把多个icon（小图标），通过ps等工具合并为一张图片，从而达到减少http请求的次数，以提高网页加载速度（性能）的一种方式。

AlisaClass / 0评论 2020-04-14

CSS躬行记（2）——伪类和伪元素

　　伪选择器弥补了常规选择器的不足，能够实现一些特殊情况下的样式，例如在鼠标悬停时或只给字符串中的第一个字符指定样式。与类选择器类似，可以从HTML元素的class属性中查看到，但伪选择器不会出现在HTML文档中。并且它的关键字大小写不敏感，也就是说emp

zengni / 0评论 2020-04-07

Windows10右键添加CMD

将以下代码保存为OpenCmdHere.reg，双击运行，修改注册表。

onetozero / 0评论 2020-03-28

css3的多列布局

columns: 4 300px; /*简写*/ column-gap:20px; column-rule:5px red double; /*设置间隙的边框*/ column-span:all;

沈宫新 / 0评论 2020-03-04

CSS3动画属性

CSS3动画属性有哪些呢？但需要调用关键帧。动画可以定义多个状态，或者用关键帧的话来说，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。由慢到快再到慢。等同于贝塞尔曲线

lanzhusiyu / 0评论 2020-03-01

css背景及css列表

background是一个综合属性，它分为以下几个属性。background-attachment　设置或检索背景图像是随对象内容滚动还是固定的　fixed 固定的。/** 图片 位置 大

wangjie / 0评论 2020-02-26

css中position属性

position属性规定元素的定位类型。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。　　　　 fixed--固定定位，相

wangjie / 0评论 2020-02-26

不使用字体图标和图片，只使用css如何做出展开收起的效果

transition: background 0.3s cubic-bezier, transform 0.3s cubic-bezier, top 0.3s cubic-bezier;

tianzyc / 0评论 2020-02-19

CSS背景图片设置

font-family: Arial,‘Microsoft YaHei‘,"Helvetica Neue",Helvetica,sans-serif;

sdbxpjzq / 0评论 2020-02-17

相关CSS样式

#full{position: absolute;background:#F7F7F7;left: 0;top: 0;display: none; z-index:2;filter:alpha;opacity :1.0}//遮罩层。5 背景定位 {back

NARUTOLUOLUO / 0评论 2011-06-24

滚动条样式

::-webkit-scrollbar{width:6px;height:16px;} ::-webkit-scrollbar-track-piece{background-color: #f3f3f3;-webkit-border-radi

bertzhang / 0评论 2020-01-31

Win10在右键菜单添加在此处打开命令窗口项

新建一个txt，将下面代码复制进去，然后把这个txt保存成reg文件，保存完毕后双击运行这个reg文件，确认即可

83206837 / 0评论 2020-01-23

转: 7 款华丽的 jQuery/CSS3 效果及源码

很久没有和大家分享精美的jQuery/CSS3应用了，这两天有时间收集了几款新发布的jQuery/CSS3插件，于是就分享给大家，如果喜欢的话请向你的朋友和同事推荐吧。在线演示 /源码下载2、CSS3带头像3D下拉菜单这款CSS3下拉菜单设计富有创意，菜单

ebuild / 0评论 2013-05-14

jQuery单击记录行自动选中checkbox

$.slice.each(function(){ var p = this; $(this).children().slice(1).click(function(){ $($(p).children()[0]).children().each(fu

81751330 / 0评论 2013-05-31

web前端入门到实战：Css背景定位

同一个标签可以同时设置背景颜色和背景图片，如果颜色和图片同时存在，那么图片会覆盖颜色。那我们用小图片不就得了，这其实也不行，因为我们每个人的屏幕分辨率大小都不同，因此需要一张较大的背景图片来解决上面的问题。

dazhifu / 0评论 2020-01-17

win10右键管理员/非管理员打开cmd

[HKEY_CLASSES_ROOT\Directory\shell\OpenCmdHere\command]. [HKEY_CLASSES_ROOT\Directory\Background\shell\OpenCmdHere]. [HKEY_CLASS

85206633 / 0评论 2020-01-12

css - 水平垂直居中几种方式

position: absolute设置left、top、margin-left、margin-to(定高)；grid，兼容性相对比较差；

冰蝶 / 0评论 2020-01-10

python3下pygame显示中文的设置

#font = pygame.font.Font #原始代码，使用默认字体，不能显示中文。字体需要自己下载好，放置一个指定的文件夹

wyqwilliam / 0评论 2020-01-09

右键添加在此处打开cygwin

[HKEY_CLASSES_ROOT\Directory\Background\shell\OpenCygwinHere]. [HKEY_CLASSES_ROOT\Directory\Background\shell\OpenCygwinHere\comm

Sabrina / 0评论 2020-01-09

浏览器滚动条样式表-参考喜马拉雅

::-webkit-scrollbar { width: 8px; background-color: #c1787800; border-radius: 100px;}

RexLeee / 0评论 2020-01-07

web前端入门到实战：CSS背景background

专门建立的学习Q-q-u-n⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧。将背景图固定在网页某个位置，一直处于可视区域中，不会随着网页滚动条滚动发生变化，但是会显示在原容器中

CaiKanXP / 0评论 2020-01-04

web前端入门到实战：CSS新属性实现特殊的图片显示效果

使用一个或多个图像相关的CSS属性可以实现许多特殊的图片显示效果，共列举了20种图片显示效果。专门建立的学习Q-q-u-n： 784-783-012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧

waterv / 0评论 2020-01-02

css-选择器

important>行间样式>id>class |属性>标签>通配符

impress / 0评论 2020-01-01

lfs 编译错误总结

不知道如何解释，另外在之前的binutils编译过程中make结果中出现诸如Nothing to be done for "...." 虽然没有显示error，但是总感觉有点问题，到后面的话是会出现问题，有些人说只要不报错就继续，我实在

加菲猫园 / 0评论 2013-06-16