CSS3基础概要

最新推荐文章于 2024-06-03 18:53:48 发布
viewerlin
最新推荐文章于 2024-06-03 18:53:48 发布
阅读量182
点赞数
分类专栏： HTML/CSS 文章标签： CSS3 Web
本文链接：https://blog.csdn.net/viewerlin/article/details/79924480
版权
HTML/CSS 专栏收录该内容
14 篇文章 2 订阅
订阅专栏
CSS3学习笔记，附有自己的注释
<!doctype html>
<html>
<head>
    <title>Learning CSS3</title>  <!--Cascading Style Sheets 层叠样式表-->

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!--Inter CSS 内部CSS，可以更方便-->
    <style type="text/css">
        <!--
        #colors #box {
            background:red;
            height:200px;
            width:200px;
            margin:40px auto;                /*距离页面上方40px,居中*/
            padding:50px;
            box-sizing:border-box;           /*可以使增加的留白不会改变区域的宽高*/
            /*border-radius: 20px;           /*让边框圆角化*/
            border-bottom-left-radius: 20px; /*让左下角圆角化 先输入上下再左右*/
          /*background: linear-gradient(blue, yellow);                 /*设定背景为渐变色，默认是由上往下渐变*/
          /*background: linear-gradient(to top, red, yellow);          /*可以设定为由下往上渐变*/
          /*background: linear-gradient(to right, green, yellow);      /*从左往右渐变*/
          /*background: linear-gradient(to bottom left, green, yellow) /*从右上往左下渐变*/
          /*background: linear-gradient(60deg, green, yellow)          /*设定具体的角度渐变 60deg=60° 角度由下向左往上*/
            background: radial-gradient(red, yellow, green, blue, orange, white);   /*背景由里向外放射渐变色*/
        }

        body#colors {
            background: rgb(25, 52, 84);  /*R=red G=green B=blue*/
            color:white;

        }
        #colors #container {
            width:600px;
            margin:0 auto;
            padding:40px;
            box-sizing:border-box;
            background: rgba(255, 255, 255, 0.5);      /*a=alpha 透明度*/
          /*background: hsla(100, 80%, 50%, 0.3);      /*另一种颜色设定，一般是使用rgba*/    
        }
        -->
        <!--
        #shadows #container {  /*设定容器的影子*/
            width:600px;
            height:40px auto;
            box-sizing:border-box;
            background: #fc3;
            /*设定影子 右侧为10px 下方为20px 虚化扩散为20px 影子距离中心的距离为-15px 颜色为黑色，
            如果数值为负数则影子方向相反，虚化扩散可以让影子看着更自然一些，
            第四个参数-15px可以缩小影子范围，如果为正数则可以放大影子范围*/
            box-shadow:10px 20px 20px -15px black;  
        }
        #shadows h1 {  /*设定标题的影子*/
            color:white;
            text-shadow:0 2px 5px blue, 0 2px 10px red; /*设定多个影子*/
        }
        #three-columns {             /*可以让文章分成几个部分显示，让文章显示更加简洁*/
            -webkit-column-count:3;
            -moz-column-count:3;
            column-count:3;          /*列数，三个写法可以支持更多浏览器*/
            -webkit-column-gap:40px;
            -moz-column-gap:40px;
            column-gap:40px;         /*间距*/
            -webkit-column-rule-style:solid;
            -moz-column-rule-style:solid;
            column-rule-style:solid; /*在间距之间显示一条线，可以是实线，也可以是虚线 dashed*/
            -webkit-column-rule-width:1px;
            -moz-column-rule-width:1px;
            column-rule-width:1px;   /*设定这条线的宽度*/
            -webkit-column-rule-color:red;
            -moz-column-rule-color:red;
            column-rule-color:red;   /*设定这条线的颜色*/
        } 
        -->
        #shadows #container {
            width:600px;
            margin:40px auto;
            padding:20px;
            box-sizing:border-box;
            background:#fc3;
            box-shadow:-10px -20px 20px -15px #333;
        }
        #shadows h1 {
            color:white;
            text-shadow:0 2px 5px blue, 0 2px 10px red;
        }
        #box1 {
            background:red;
            height:200px;
            width:200px;
            margin:40px auto;
            padding:50px;
            box-sizing:border-box;
            border-radius:50px;
            color:white;
        }
        @keyframes box1 { /*关键帧，动画属性 将关键帧设定到box里*/
            from {  /*从什么时间开始*/
                background-color:red;
                border-radius:40px;  /*开始是40px*/
                top:0;
                left:0;

            }
            to {   /*到什么时间结束*/
                background-color:black;
                border-radius:100px; /*结束是100px*/
                top:100px;
                left:100px;
            }
        }
        #box1 {
            position:relative;            /*在相对的位置*/
            /*
            animation-name:box1;           /*设定动画的名称*/
            animation-duration:3s;        /*设定动画的时长*/
            animation-timing-function:ease-in-out; /*添加运动效果*/
            animation-delay:1s;           /*网页刷新后延迟1s再播放*/
            animation-iteration-count:3;  /*重复的次数*/
          /*animation-direction:reverse;  /*倒序播放*/
            animation-direction:alternate;/*顺序倒序循环播放*/

            animation: box1 3s ease-in-out 1s 3 alternate;  /*简写 效果与上面一样*/
        }
        #box2 {
            background:blue;
            width:200px;
            height:200px;
            color:white;
        }
        #box2:hover {
            background:red;
            width:300px;
            height:300px;
          /*transition:all ease-in 4s;  /*所有的都要改变，渐变动画，间隔4s*/
            transition:width 8s, height 2s, background 20s; /*可以设定各个属性在什么时间做出改变*/   
        }   
    </style>
</head> 
<!--
<body id="colors">
    <div id="box">some text here</div>
    <div id="container">   
        <h1>CSS3 Colors</h1>
        <div id="box">This is a box with a gradient</div>
    </div>
</body>
-->
<!--
<body id="shadows">
    <div id="container"> 
        <h1>CSS3 Columns</h1>
        <p id="three-columns">This is some text.This is some text.This is some textThis is some text.This is some text.This is some text
This is some text.This is some text.This is some textThis is some text.This is some text.This is some text
This is some text.This is some text.This is some textThis is some text.This is some text.This is some text
This is some text.This is some text.This is some textThis is some text.This is some text.This is some text</p>
    </div>  
</body>
-->
<body id="shadows">
    <div id="container">
        <h1>CSS3 Animations &amp; Transition</h1>
        <div id="box1">Box!</div>
        <div id="box2">Transition Box!</div>
    </div>
</body>

</html>