XML与Web_7 CSS(二)-CSDN博客

本文链接：https://blog.csdn.net/weixin_45488518/article/details/118055105

CSS 二

CSS3概要
- 背景
- 渐变（gradients）
CSS3 增强效果
Timer控制

CSS3概要

border-radius属性创建圆角

border:2px solid;
border-radius:25px;

box-shadow属性创建阴影

box-shadow: 10px 10px 5px #888888;

border-image属性创建边框
border-image属性创建上文边框的原始图像

border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round;
/* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; 
/* Opera */

<html>
<head>
    <meta charset="UTF-8">
    <style>
        .cir1{
            border: 2px solid;
            border-radius:10px;
            visibility:hidden;
        }
        .cir2{
            border: 2px solid;
            border-radius:25px;
            box-shadow: 10px 10px 50px #7F7F7F;
            visibility:hidden;
        }
        .cir3{
            border: 2px solid;
            border-radius:25px;
            border-image:url(6-5.png) 60 60 round;
            -webkit-border-image:url(6-5.png) 60 60 round;
            -o-border-image:url(6-5.png) 60 60 round;
            visibility:hidden;
        }
    </style>

    <script>
        function onshowdiv1(){
            document.getElementById("mydiv1").style.visibility="visible";
        }
        function onshowdiv2(){
            document.getElementById("mydiv2").style.visibility="visible";
        }
        function onshowdiv3(){
            document.getElementById("mydiv3").style.visibility="visible";
        }
    </script>
</head>
<body>

<div class="cir1" id="mydiv1">
    <p id="p1">Hello!<p>
    <p>Hallo!<p>
    <p>吃了吗!<p>
</div>
<p>
<div class="cir2" id="mydiv2">
    <p id="p2">Hello!<p>
    <p>Hallo!<p>
    <p>吃了吗!<p>
</div>
<p>

<div class="cir3" id="mydiv3">
    <p id="p3">Hello!<p>
    <p>Hallo!<p>
    <p>吃了吗!<p>
</div>
<p>
<p><button onclick="onshowdiv1()">div1</button>
<p><button onclick="onshowdiv2()">div2</button>
<p><button onclick="onshowdiv3()">div3</button>
</body>
</html>

在这里插入图片描述

背景

background-image：添加背景图片，不同的背景图像和图像用逗号隔开
background-size：指定背景图像的大小
background-origin：指定了背景图像的位置区域：content-box, padding-box, border-box
background-clip：背景图从指定位置开始绘制：content-box, padding-box, border-box

渐变（gradients）

使元素内容在两个或多个指定的颜色之间显示平稳的过渡
线性渐变 - 从上到下（默认）
background: linear-gradient(red, blue);
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 /
background: -o-linear-gradient(red, blue); / Opera 11.1 - 12.0 /
background: -moz-linear-gradient(red, blue); / Firefox 3.6 - 15 */
线性渐变 - 从左到右
background: linear-gradient(to right, red , blue);
线性渐变 - 对角
background: linear-gradient(to bottom right, red , blue);
线性渐变-多个颜色结点
background: linear-gradient(red, green, blue);
径向渐变 - 颜色结点均匀分布（默认）
background: radial-gradient(red, green, blue);
径向渐变 - 颜色结点不均匀分布
background: radial-gradient(red 5%, green 15%, blue 60%);
设置形状
circle，ellipse（默认）
background: radial-gradient(circle, red, yellow, green);
重复的径向渐变
background: repeating-radial-gradient(red, yellow 10%, green 15%);

CSS3 增强效果

hover 选择器
用于定义在鼠标移到链接上时添加的特殊样式
hover选择器可用于所有元素
是一个伪类，它仅适用于处于悬停状态的元素

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style>
        * { margin: 0; padding: 0; }
        body { font-family: "Microsoft yahei", Arial; background: #eee; }
        .box { width: 500px; height: 500px; margin: 50px auto; }
        .box ul li {
            float: left;
            width: 400px; height: 300px;
            background: #979797;
            border: solid 10px #979797;
            margin: 10px;
            list-style: none;
            position: relative;
            overflow: hidden;
        }

        .box ul li .cover {
            width: 400px; height: 300px;
            background: rgba(128, 128, 128, 0.5);
            position: absolute;
            left: 0; top: 0;
            text-align: center;
            color: #ffffff;
            transform-origin: right bottom;
            -webkit-transform-origin: right bottom;
            -moz-transform-origin: right bottom;
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            transition: all 2s;
            -webkit-transition: all 0.2s;
            -moz-transition: all 0.2s;
        }

        .box ul li .cover p { margin-top: 10px; font-size: 14px; }
        .box ul li:hover .cover {
            transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
        }
        
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li>
            <img src="6-2-1.jpg" width="400" height="300" alt="">
            <div class="cover">
                <h4>Donald John Trump</h4>
                <p>The President of the United States</p>
            </div>
        </li>
        <li>
            <img src="6-2-2.jpg" width="400" height="300" alt="">
            <div class="cover">
                <h4>Donald John Trump</h4>
                <p>The President of the United States</p>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

在这里插入图片描述
两个图片叠加：

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #cooker{
            position:absolute;
            left:280px;
            top:150px;
        }

    </style>
    <script>
        window.onload=function(){
            var canvas=document.getElementById("myCanvas");
            var context=canvas.getContext("2d");
            var img1 = new Image();
            img1.src ="03.jpg";
            img1.onload = imgbg;
            function imgbg(){
                var bg = context.createPattern(img1, "no-repeat");
                context.fillStyle = bg;
                context.fillRect(0, 0, canvas.width, canvas.height);
            }
        }
    </script>
</head>
<body>
<canvas class="myCanvasCSS" id="myCanvas" width="580" height="326"></canvas>
<div id="cooker"><img src="02.png" /></div>
</body>
</html>

在这里插入图片描述

Timer控制

<!DOCTYPE html>
<html>
<head>
    <script>
        var count1=0;
        var count2=0;
        function mytimer1(){
            count1++;
            document.getElementById("result1").innerHTML=count1;
        }
        function mytimer2(){
            count2++;
            document.getElementById("result2").innerHTML=count2;
        }
        function StartTimeOut(){
            setTimeout(mytimer1,1000);
            setTimeout(mytimer1,2000);
            setTimeout(mytimer1,5000);
        }
        function StartInterval(){
            setInterval(mytimer1,300);
            setInterval(mytimer2,600);
        }
    </script>
</head>
<body>
<p>Count1 numbers: <output id="result1"></output></p>
<p>Count2 numbers: <output id="result2"></output></p>
<button onclick="StartTimeOut()">Start Time out</button>
<button onclick="StartInterval()">Start Interval</button>
<br><br>
</body>
</html>