CSS3基础1

清风霁玥缘2024-03-10 8:59

  1. 背景

    1. background-image

      1. 示例

        css 复制代码 
        #example1 { 
    background-image: url(img_flwr.gif), url(paper.gif); 
    background-position: right bottom, left top; 
    background-repeat: no-repeat, repeat; 
}

      2. 一样的功能推荐使用background，一行就可搞定

        css 复制代码 
        background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

    2. background-size

      1. 设置图片的宽度和高度

        css 复制代码 
         background-size:80px 60px;

      2. CSS3以前，背景图像大小由图像的实际大小决定。

      3. 常用值还有：100% 100%，contain，over

    3. background-origin

      1. background-origin 属性指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像。

      2. 图例

      3. 示例

        css 复制代码 
        background-origin:content-box;

    4. background-clip

      1. CSS3中background-clip背景剪裁属性是从指定位置开始绘制。

      2. 示例

        css 复制代码 
        background-clip: content-box;

    5. 补充：CSS3 多重背景(multiple backgrounds)

      1. 多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。

      2. 示例

        css 复制代码 
        background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;

      3. 注意

        1. 用逗号隔开每组 background 的缩写值；

        2. 如果有 size 值，需要紧跟 position 并且用 "/" 隔开；

        3. 如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。

        4. background-color 只能设置一个。

  2. 圆角

    1. 使用 CSS3 border-radius 属性，可以给任何元素制作 "圆角"。
    2. 图例
    3. 使用border-radius:50% 和 100%都可以做椭圆或者圆

  3. 渐变

    1. 线性渐变

      1. 示例

        css 复制代码 
        background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

      2. 参数说明

        1. directtion

          1. 示例

            css 复制代码 
            /* 
		1.默认是从上至下
		2.使用to right 表示从左至右 to bottom right等等
		3.使用angle做更多的控制
		*/
        2. color-stop1、color-stop2...
          1. 设置颜色:这里十六进制或者rgb或者rgba都可以
          2. 注意:颜色后可以跟 数值% 表示从元素出现方向在数值% 的位置

      3. 可重复的线性渐变

        1. 示例

          css 复制代码 
          #grad {
  /* 标准的语法 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

        2. 规则类似线性渐变

    2. 径向渐变

      1. 语法

        css 复制代码 
        background-image: radial-gradient(shape size at position, start-color, ..., last-color);

      2. 参数设置

        1. shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
        2. 其余类似线性渐变

      3. 可重复的径向渐变

        1. 示例

          css 复制代码 
          #grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

  4. 文本效果

    1. text-shadow

      1. 示例

        css 复制代码 
        h1
{
    text-shadow: 5px 5px 5px #FF0000;
/*您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：*/
}

    2. box-shadow

      1. 示例

        css 复制代码 
        ​
div {
    box-shadow: 10px 10px 5px #888888;
}

​

      2. 阴影叠加

        css 复制代码 
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    3. text-overflow

      1. ellipsis：会省略

      2. clip：不省略

      3. 示例：

        css 复制代码 
        p.test1 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: clip; 
}
 
p.test2 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis; 
}

    4. word-wrap 换行

      1. 如果某个单词太长，不适合在一个区域内，它扩展到外面：CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字。

      2. 示例

        css 复制代码 
        p {word-wrap:break-word;}

    5. word-break 拆分换行

      1. 示例

        css 复制代码 
        p.test1 {
    word-break: keep-all; //不拆分
}
 
p.test2 {
    word-break: break-all; //拆分
}

    6. 备注

  5. 2D 转换

    1. translate()

      1. 示例：

        css 复制代码 
        div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

      2. 说明：translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。

    2. rotate()

      1. 示例：

        css 复制代码 
        div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

      2. 说明：rotate值（30deg）元素顺时针旋转30度。

    3. scale()

      1. 示例：

        css 复制代码 
        -ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */

      2. 说明：scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。

    4. skew()

      1. 示例：

        css 复制代码 
        div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

      2. 说明：skew(30deg,20deg) 元素在 X 轴和 Y 轴上倾斜 20 度 30 度。

    5. matrix()
      1. 示例：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
      2. 说明：
        1. scaleX() (水平缩放)：控制元素水平方向的缩放。如果值为 1，则不进行水平缩放；如果大于 1，则放大；如果在 0 和 1 之间，则缩小。
        2. skewY() (垂直倾斜)：控制元素在垂直方向上的倾斜。
        3. skewX() (水平倾斜)：控制元素在水平方向上的倾斜。
        4. scaleY() (垂直缩放)：控制元素垂直方向的缩放。如果值为 1，则不进行垂直缩放；如果大于 1，则放大；如果在 0 和 1 之间，则缩小。
        5. translateX() (水平平移)：控制元素在水平方向上的平移量。
        6. translateY() (垂直平移)：控制元素在垂直方向上的平移量。即在不变换的情况下是matrix(1, 0, 0, 1, 0, 0)

  6. 过渡

    1. 示例

      css 复制代码 
      div
{
    transition: width 1s linear 2s; 
    /* 简写属性，用于在一个属性中设置四个过渡属性。*/
    /* Safari */
    -webkit-transition:width 1s linear 2s;
}

    2. 参数说明

      css 复制代码 
          transition-property: width;//规定应用过渡的 CSS 属性的名称。
    transition-duration: 1s;//	定义过渡效果花费的时间。默认是 0
    transition-timing-function: linear;//规定过渡效果的时间曲线。默认是 "ease"。
    transition-delay: 2s;//规定过渡效果何时开始。默认是 0。

    3. 补充

      1. 鼠标悬浮过渡效果

        css 复制代码 
        div{
  width: 200px;
  height: 200px;
  background-color: #f00;
  transition: all 2s;
}

div:hover{
  background-color: #00f;
  transform: translateX(500px) translateY(500px) scale(0.8) rotate(360deg);
}

      2. 黑幕样式

        css 复制代码 
        <p>这是测试<span class="mask">并且被掩盖的</span>文字！</p>
<style>
.mask {
    background-color: #252525;
    color: #252525;
    transition: color 0.5s;
}

.mask:hover {
    color: #ffffff;
}
</style>

      3. 左右两个半屏，鼠标移上后就会全屏

        css 复制代码 
        <div class="left"></div>
<div class="right"></div>
<style>
.left{
    width:50%;
    height:50px;
    background:#C00;
    position:absolute;
    top:0;
    left:0;
    transition:0.6s;/*动画*/
    -moz-transition:0.6s; /* Firefox 4 */
    -webkit-transition:0.6s; /* Safari and Chrome */
    -o-transition:0.6s; /* Opera */
}
.right{
    width:50%;
    height:50px;
    background:#03C;
    position:absolute;
    top:0;
    right:0;
    transition:0.6s;/*动画*/
    -moz-transition:0.6s; /* Firefox 4 */
    -webkit-transition:0.6s; /* Safari and Chrome */
    -o-transition:0.6s; /* Opera */
}
.left:hover{
    width:100%;
    z-index:99;
}
.right:hover{
    width:100%;
    z-index:99;
}
</style>

  7. 动画

    1. 制作动画

      1. 第一种

        css 复制代码 
        @keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

      2. 第二种

        css 复制代码 
        @keyframes myfirst
{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

    2. 设置动画属性

      1. 设置所有属性

        css 复制代码 
        div
{
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    /* Safari 与 Chrome: */
    -webkit-animation-name: myfirst;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

      2. 设置所有属性简写

        css 复制代码 
        div
{
    animation: myfirst 5s linear 2s infinite alternate;
    /* Safari 与 Chrome: */
    -webkit-animation: myfirst 5s linear 2s infinite alternate;
}

      3. 参数列表

    3. 行星运动

      html 复制代码 
      <div class="solarsys">
  <!--太阳-->
  <div class='sun'></div>

  <!--水星轨道-->
  <div class='mercuryOrbit'></div>

  <!--水星-->
  <div class='mercury'></div>

  <!--金星轨道-->
  <div class='venusOrbit'></div>

  <!--金星-->
  <div class='venus'></div>

  <!--地球轨道-->
  <div class='earthOrbit'></div>

  <!--地球-->
  <div class='earth'></div>

  <!--火星轨道-->
  <div class='marsOrbit'></div>

  <!--火星-->
  <div class='mars'></div>

  <!--木星轨道-->
  <div class='jupiterOrbit'></div>

  <!--木星-->
  <div class='jupiter'></div>

  <!--土星轨道-->
  <div class='saturnOrbit'></div>

  <!--土星-->
  <div class='saturn'></div>

  <!--天王星轨道-->
  <div class='uranusOrbit'></div>

  <!--天王星-->
  <div class='uranus'></div>

  <!--海王星轨道-->
  <div class='neptuneOrbit'></div>

  <!--海王星-->
  <div class='neptune'></div>
</div>
<style>
.solarsys{
  width: 800px;
  height: 800px;;
  position: relative;
  margin: 0 auto;
  background-color: #000000;
  padding: 0;
  transform: scale(1);
}

/*太阳*/
.sun {
  left:357px;
  top:357px;
  height: 90px;
  width: 90px;
  background-color: rgb(248,107,35);
  border-radius: 50%;
  box-shadow: 5px 5px 10px rgb(248,107,35), -5px -5px 10px rgb(248,107,35), 5px -5px 10px rgb(248,107,35), -5px 5px 10px rgb(248,107,35);
  position: absolute;
  margin: 0;
}

/*水星*/
.mercury {
  left:337.5px;
  top:395px;
  height: 10px;
  width: 10px;
  background-color: rgb(166,138,56);
  border-radius: 50%;
  position: absolute;
  transform-origin: 62.5px 5px;
  animation: rotate 1.5s infinite linear;
}

/*水星轨道*/
.mercuryOrbit {
  left:342.5px;
  top:342.5px;
  height: 115px;
  width: 115px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  margin: 0px;
  padding: 0px;
}

/*金星*/
.venus {
  left:309px;
  top:389px;
  height: 22px;
  width: 22px;
  background-color: rgb(246,157,97);
  border-radius: 50%;
  position: absolute;
  transform-origin: 91px 11px;
  animation: rotate 3.84s infinite linear;
}

/*金星轨道*/
.venusOrbit {
  left:320px;
  top:320px;
  height: 160px;
  width: 160px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  /*margin: 100px;*/
  /*transform-origin: -75px -75px;*/
  /*animation: rotate 4s infinite linear;*/
  margin: 0px;
  padding: 0px;
}

/*地球*/
.earth {
  left:266.5px;
  top:391px;
  height: 18px;
  width: 18px;
  background-color: rgb(115,114,174);
  border-radius: 50%;
  position: absolute;
  transform-origin: 134px 9px;
  animation: rotate 6.25s infinite linear;
}

/*地球轨道*/
.earthOrbit {
  left:275px;
  top:275px;
  height: 250px;
  width: 250px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  /*margin: 100px;*/
  /*transform-origin: -75px -75px;*/
  /*animation: rotate 4s infinite linear;*/
  margin: 0px;
  padding: 0px;
}

/*火星*/
.mars {
  left:222.5px;
  top:392.5px;
  height: 15px;
  width: 15px;
  background-color: rgb(140,119,63);
  border-radius: 50%;
  position: absolute;
  transform-origin: 177.5px 7.5px;
  animation: rotate 11.75s infinite linear;
}

/*火星轨道*/
.marsOrbit {
  left:230px;
  top:230px;
  height: 340px;
  width: 340px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  /*margin: 100px;*/
  /*transform-origin: -75px -75px;*/
  /*animation: rotate 4s infinite linear;*/
  margin: 0px;
  padding: 0px;
}

/*木星*/
.jupiter {
  left:134px;
  top:379px;
  height: 42px;
  width: 42px;
  background-color: rgb(156,164,143);
  border-radius: 50%;
  position: absolute;
  transform-origin: 266px 21px;
  animation: rotate 74.04s infinite linear;
}

/*木星轨道*/
.jupiterOrbit {
  left:155px;
  top:155px;
  height: 490px;
  width: 490px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  /*margin: 100px;*/
  /*transform-origin: -75px -75px;*/
  /*animation: rotate 4s infinite linear;*/
  margin: 0px;
  padding: 0px;
}

/*土星*/
.saturn {
  left:92px;
  top:387px;
  height: 26px;
  width: 26px;
  background-color: rgb(215,171,68);
  border-radius: 50%;
  position: absolute;
  transform-origin: 308px 13px;
  animation: rotate 183.92s infinite linear;
}

/*土星轨道*/
.saturnOrbit {
  left:105px;
  top:105px;
  height: 590px;
  width: 590px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  /*margin: 100px;*/
  /*transform-origin: -75px -75px;*/
  /*animation: rotate 4s infinite linear;*/
  margin: 0px;
  padding: 0px;
}

/*天王星*/
.uranus {
  left:41.5px;
  top:386.5px;
  height: 27px;
  width: 27px;
  background-color: rgb(164,192,206);
  border-radius: 50%;
  position: absolute;
  transform-origin: 358.5px 13.5px;
  animation: rotate 524.46s infinite linear;
}

/*天王星轨道*/
.uranusOrbit {
  left:55px;
  top:55px;
  height: 690px;
  width: 690px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  /*margin: 100px;*/
  /*transform-origin: -75px -75px;*/
  /*animation: rotate 4s infinite linear;*/
  margin: 0px;
  padding: 0px;
}

/*海王星*/
.neptune {
  left:10px;
  top:390px;
  height: 20px;
  width: 20px;
  background-color: rgb(133,136,180);
  border-radius: 50%;
  position: absolute;
  transform-origin: 390px 10px;
  animation: rotate 1028.76s infinite linear;
}

/*海王星轨道*/
.neptuneOrbit {
  left:20px;
  top:20px;
  height: 760px;
  width: 760px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  /*margin: 100px;*/
  /*transform-origin: -75px -75px;*/
  /*animation: rotate 4s infinite linear;*/
  margin: 0px;
  padding: 0px;
}

@keyframes rotate {
  100% {
    transform: rotate(-360deg);
  }
}
</style>

    4. 注意：animation 并不太注重语法顺序（除了 【duration / 动画用时】 一定在 【delay / 动画延时】 之前），但在 -webkit-animation （主要针对 "Safari"）中，不能以 -webkit-animation-name 来结尾：

      css 复制代码 
      animation: myfirst 5s linear 2s infinite alternate;
animation: 5s linear 2s infinite myfirst alternate;
animation: 5s 2s infinite alternate linear myfirst;
// etc... 都是可以的
相关推荐
我要洋人死28 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人39 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人40 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web：开源啦 ，高仿钉钉、飞书、企业微信的审批流程设计器，轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程：python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play