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... 都是可以的
相关推荐
C语言魔术师6 分钟前
【小游戏篇】三子棋游戏
前端·算法·游戏
匹马夕阳1 小时前
Vue 3中导航守卫（Navigation Guard）结合Axios实现token认证机制
前端·javascript·vue.js
你熬夜了吗？1 小时前
日历热力图，月度数据可视化图表（日活跃图、格子图）vue组件
前端·vue.js·信息可视化
桂月二二7 小时前
探索前端开发中的 Web Vitals —— 提升用户体验的关键技术
前端·ux
hunter2062069 小时前
ubuntu向一个pc主机通过web发送数据，pc端通过工具直接查看收到的数据
linux·前端·ubuntu
qzhqbb9 小时前
web服务器 网站部署的架构
服务器·前端·架构
刻刻帝的海角9 小时前
CSS 颜色
前端·css
九酒9 小时前
从UI稿到代码优化，看Trae AI 编辑器如何帮助开发者提效
前端·trae
浪浪山小白兔10 小时前
HTML5 新表单属性详解
前端·html·html5
lee57610 小时前
npm run dev 时直接打开Chrome浏览器
前端·chrome·npm
热门推荐
01centos7 init.d 和system.d02Dell服务器升级ubuntu 22.04失败解决03半导体应用系统一些小知识收集(strip&wafer mapping,EAP&scada)04PyTorch AMP 混合精度中grad_scaler.py的scale函数解析05Windows10安装PCL1.14.0及点云配准06密码学原理技术-第六章-introduction to pulibc-key cryptography07xgboost: Why not implement distributed XGBoost on top of spark08Oracle Scheduler: Calendaring09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10BMC 虚拟i2c访问PCA9545(switch芯片)后面的设备,为什么找不到PCA9545?