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... 都是可以的
相关推荐
轻口味8 分钟前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王43 分钟前
React Hooks
前端·javascript·react.js
迷途小码农零零发1 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀1 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪2 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
荆州克莱3 小时前
mysql中局部变量_MySQL中变量的总结
spring boot·spring·spring cloud·css3·技术
ekskef_sef3 小时前
32岁前端干了8年，是继续做前端开发，还是转其它工作
前端
sunshine6414 小时前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻4 小时前
Vue（四）
前端·javascript·vue.js
热门推荐
01Cube-Studio：开源大模型全链路一站式中台02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问07构建高效的广告投放系统：应用架构的设计与实现08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10【一文读懂】NTN（非地面网络）技术介绍