额外知识补充三

最新推荐文章于 2024-07-24 14:20:14 发布

小袁儿

最新推荐文章于 2024-07-24 14:20:14 发布

阅读量410

点赞数 9

分类专栏： CSS3 文章标签： css

本文链接：https://blog.csdn.net/qq_42535142/article/details/135375050

版权

CSS3 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、边框的形状

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      /* background-color: transparent; */

      border: 50px solid transparent;
      /* border-right-color: blue;
      border-bottom-color: aqua;
      border-left-color: blueviolet; */
      
      /* border-right-color: transparent;
      border-bottom-color: transparent;
      border-left-color: transparent; */
      border-top-color: orange;

      box-sizing: border-box;

      /* 旋转 */
      transform-origin: center 25%;
      transform: rotate(180deg);
    }
  </style>
</head>
<body>
  
  <div class="box"></div>

</body>
</html>

二、认识Web字体

三、Web fonts的工作原理

四、使用Web Fonts

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 将这个字体引入到网页中 */
    @font-face {
      font-family: "why";
      src: url("./fonts/AaQingHuanYuanTi-2.ttf");
    }

    .box {
      font-family: "why";
    }
  </style>
</head>
<body>
  
  <div class="box">我是div元素</div>

</body>
</html>

五、web-fonts的兼容性

六、web fonts兼容性写法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @font-face {
      font-family: "why";
      src: url("./fonts02/AaQingHuanYuanTi.eot"); /* IE9 */
      src: url("./fonts02/AaQingHuanYuanTi.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
      url("./fonts02/AaQingHuanYuanTi.woff") format("woff"), /* chrome、firefox */
      url("./fonts02/AaQingHuanYuanTi.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
      url("./fonts02/AaQingHuanYuanTi.svg#uxfonteditor") format("svg"); /* iOS 4.1- */

      font-style: normal;
      font-weight: 400;
    }

    body {
      font-family: "why";
    }
  </style>
</head>
<body>
  
  <div class="box">我是div元素</div>

</body>
</html>

七、认识字体图标

八、字体图标的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @font-face {
      font-family: "iconfont";
      src: url("./fonts03/iconfont.ttf");
    }

    .iconfont {
      font-family: "iconfont";
      font-style: normal;
    }

    .music::before {
      content: "\e664";
    }

    .icon {
      display: inline-block;
      width: 20px;
      height: 20px;
    }

  </style>
</head>
<body>
  
  <!-- 直接通过内容(字符实体) -->
  <i class="iconfont">&#xe654;</i>
  <i class="iconfont">&#xe664;</i>

  <i class="icon"></i>

  <!-- 不使用字符实体的方式展示出来(伪元素) -->
  <i class="iconfont music"></i>

</body>
</html>

iconfont .css

@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('iconfont.ttf?t=1649043846340') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-shouye:before {
  content: "\e668";
}

.icon-touxiang-kong:before {
  content: "\e660";
}

.icon-video:before {
  content: "\e63e";
}

.icon-video1:before {
  content: "\e624";
}

.icon-music:before {
  content: "\e664";
}

.icon-Video:before {
  content: "\e69e";
}

.icon-music1:before {
  content: "\e654";
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./fonts03/iconfont.css">
  <style>
    .icon-shouye {
      font-size: 30px;
      color: red;
    }
  </style>
</head>
<body>
  
  <i class="iconfont icon-shouye"></i>

</body>
</html>

九、认识精灵图 CSS Sprite

十、精灵图的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      background: #333;
    }

    .topbar {
      background-image: url(../images/topbar_sprite.png);
      background-repeat: no-repeat;
      display: inline-block;
    }

    i.hot-icon {
      background-position: -192px 0;
      width: 26px;
	    height: 13px;
    }

    i.logo-icon {
      background-position: 0 -19px;
      width: 157px;
	    height: 33px;
    }
  </style>
</head>
<body>
  
  <div class="box">
    <i class="topbar hot-icon"></i>
    <i class="topbar logo-icon"></i>
    <!-- <i class="topbar "></i> -->
  </div>

</body>
</html>

十一、cusor

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      cursor: none;
      text-decoration: underline;
      color: #00f;
    }
  </style>
</head>
<body>
  
  <div>我是box</div>
  <a href="#">百度一下</a>

</body>
</html>