CSS3(2)

最新推荐文章于 2024-10-01 22:08:10 发布

____@

最新推荐文章于 2024-10-01 22:08:10 发布

阅读量401

点赞数

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/qq_60179418/article/details/121764887

版权

background-attachment

UI样式

圆角

border-radius

用来设置边框圆角。当使用一个半径时确定一个圆形；当使用两个半径时（用 / 分隔）确定一个椭圆，这个圆与边框的交集形成圆角效果。

默认值：0 继承性：不可继承

值：

固定的px值定义圆形半径或椭圆的半长轴，半短轴。不能取负值

使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。不能取负值

实现风车效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap{
            width: 300px;
            height: 300px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            transition: 2s;
        }
        .wrap > div{
            width: 130px;
            height: 130px;
            background-color: aquamarine;
            float: left;
            margin: 10px;
            box-sizing: border-box;
        }
        .wrap > div:nth-child(1),.wrap > div:nth-child(4){
            border-radius: 0 50% 0 50%;
        }
        .wrap > div:nth-child(2),.wrap > div:nth-child(3){
            border-radius: 50% 0 50% 0;
        }
        .wrap:hover{
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

边框图片

border-image-source

该属性定义使用一张图片来代替边框样式；如果看只为none，则仍然使用border-style定义的样式

默认值：none 继承性：不可继承

border-image-slice

该属性会通过规范将border-image-source的图片明确分割为9个区域：四个角，四边以及中心区域。并可指定偏移量

默认值：100% 继承性：不可继承

值的百分比参照image本身

中间区域使用 fill 来填充

border-image-repeat

该属性定义图片如何填充边框。或为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框

默认值：stretch 继承性：不可继承

值：

stretch（拉伸）

repeat，round（平铺）

border-image-width

该属性定义图像边框的宽度

默认值：1 继承性：不可继承

border-image-outset

该属性定义边框图像可超出边框盒的大小

默认值：0 继承性：不可继承

背景

background-position

指定背景位置的初始位置

默认值：0% 0% 继承性：不可继承

值：

百分比：参照尺寸为背景图片定位区域的大小减去背景图片的大小

第一个值：元素在水平方向的位移

第二个值：元素在垂直方向的位移

background-attachment

该属性决定背景是在视口中固定的还是随包含它的区块滚动的

默认值：scroll 继承性：不可继承

值：

fixed

表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动

scroll

表示背景相对于元素本身固定，而不是随着它的内容滚动

background-origin

设置背景渲染的起始位置

默认情况下背景图片是从padding-box开始绘制，从border-box开始剪裁

值：

content-box

padding-box

border-box

background-clip

设置背景的裁剪位置

值：

border-box

padding-box

content-box

text（-webkit-background-clip）

background-size

设置背景图片大小

默认值：auto auto 继承性：不可继承

值：

百分比：指定背景图片相对背景区的百分比。背景区由background-origin设置，默认为盒模型的内容区与内边距

auto：以背景图片的比例缩放背景图片

注意：

单值时，这个值指定图片的宽度，图片的高度隐式的为auto

两个值时，第一个指定图片的宽度，第二个指定图片的高度

线性渐变

linear-gradient()

渐变是放在background-image中的

默认从上到下发生渐变

linear-gradient(red,blue);

改变渐变方向：(top bottom left right)

linear-gradient(to 结束的方向,red,blue);

使用角度

linear-gradient(角度,red,blue);

重复渐变

repeating-linear-gradient(red,blue);

实现发廊灯效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            var inner=document.getElementsByClassName("inner")[0];
            var flag=0;
            setInterval(function(){
                flag++;
                if(flag==300){
                    flag=0;
                }
                inner.style.marginTop=-flag+"px";
            },30);
        }
    </script>
    <style>
        .wrap{
            width: 50px;
            height: 300px;
            border: 1px solid;
            margin: 0 auto;
            overflow: hidden;
        }
        .wrap > div{
            width: 100%;
            height: 600px;
            background: repeating-linear-gradient(135deg,black 0px,black 20px,white 20px,white 40px);
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="inner"></div>
    </div>
</body>
</html>

实现光斑动画效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
            overflow: hidden;
            background-color: black;
            text-align: center;
            padding-top: 20px;
        }
        h1{
            display: inline-block;
            color: gray;
            font-size: 80px;
            font-weight: bold;
            background: linear-gradient(130deg,rgba(255,255,255,0) 100px,rgba(255,255,255,1) 150px,rgba(255,255,255,0) 200px);
            background-repeat: no-repeat;
            background-clip: text;
            -webkit-background-clip: text;
            color: rgba(255,255,255,.3);
        }
    </style>
    <script>
        window.onload=function(){
                var inner=document.getElementsByTagName("h1")[0];
                var flag=-100;
                setInterval(function(){
                    flag+=10;
                    if(flag==600){
                        flag=-100;
                    }
                    inner.style.backgroundPosition=flag+"px";
                },30);
            }
    </script>
</head>
<body>
    <h1>星辰星辰</h1>
</body>
</html>