2022.7.11 CSS常用属性练习

最新推荐文章于 2024-05-25 11:49:01 发布

长寿的秘诀就是睡.

最新推荐文章于 2024-05-25 11:49:01 发布

阅读量90

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq1830882455/article/details/125715492

版权

一、边框

1.边框圆角

<!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>边框练习</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        border: 3px solid red;
        border-radius: 50% 50% 10px 20px; /*分别是上右下左*/
      }
      .circular {
        width: 200px;
        height: 200px;
        border: 3px solid red;
        border-radius: 50%; /*圆形*/
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <div class="circular"></div>
  </body>
</html>

2.盒阴影

<!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>边框练习</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: red;
        box-shadow: 20px 20px 10px; /*分别是水平平移，垂直平移，阴影度（越小越不透明）*/
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

3.渐变练习

<!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>渐变练习</title>
    <style>
      .gradient {
        width: 100px;
        height: 100px;

        /* 基本语法 */ /*多个颜色使用逗号隔开*/
        /* background-image: linear-gradient(red, blue); 默认从上到下 */
        /* background-image: linear-gradient(to right, red, blue); 从左到右 */
        /* background-image: linear-gradient(to bottom right, red, blue); 对角变化 */

        /* 使用角度 */
        /* background-image: linear-gradient(180deg, red, blue); 从上到下 */
        /* background-image: linear-gradient(90deg, red, blue); 从左到右 */

        /* 透明度 */
        /* background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); 最后一位0是透明，1是不透明 */

        /* 重复 */
        /* background-image: repeating-linear-gradient(red, yellow 10%, green 10%); */
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>

4.文本效果

<!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>文本效果练习</title>
    <style>
      div {
        width: 500px;
        background-color: red;
      }

      /* 文本阴影 */
      /* .text-shadow {
         text-shadow: 5px 5px 2px red;
      } */

      /* 文本溢出 */
      /* .text-Line-feed {
         overflow: hidden;
         text-overflow: ellipsis|clip;
         超过一行省略/裁剪
         white-space: nowrap;
         超过两行省略/裁剪
         display: -webkit-box;
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 2;
       } */

      /* 文本换行 */
      /* .Wrap-text {
        长文本换行
        word-wrap: break-word;
        单词拆分换行
        word-break: break-all;
      } */
    </style>
  </head>
  <body>
    <div class="text-shadow">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti,
      cupiditate!
    </div>
    <hr />
    <div class="text-Line-feed">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic quasi ullam
      velit officiis veritatis vitae tempore, modi accusantium mollitia quos
      dignissimos perspiciatis temporibus tempora ipsa aliquam magnam numquam
      saepe debitis quidem repellat exercitationem! Mollitia esse facere aliquid
      libero inventore placeat sequi officiis ad, illo doloribus harum suscipit
      dolorum enim voluptatibus, sapiente distinctio non dolores aspernatur! Est
      dolorem, asperiores a quidem sunt facilis cum quae dolore. Necessitatibus
      molestiae animi eligendi hic, consequuntur dolor libero ullam cupiditate
      sint quibusdam eaque cumque fugiat optio eum autem officia in nisi eos
      voluptatem, aperiam repellat nostrum dignissimos aliquam? Voluptatum id
      nostrum cupiditate doloremque aliquam modi!
    </div>
    <hr />
    <div class="Wrap-text">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima vero
      velit distinctio quis aut quia consequatur similique necessitatibus, culpa
      exercitationem iure fuga consectetur. Tempora explicabo alias dolore
      consequuntur vero eius odit at natus, illum voluptate architecto magni
      asperiores saepe quia sit excepturi beatae quis ipsum! Error, fugiat quos.
      Reiciendis in accusamus sed sapiente minus quaerat quos pariatur possimus.
      Laboriosam, laborum dolores officia quae maxime illum perferendis facilis
      ullam. Expedita excepturi quos est consequatur, earum inventore quibusdam
      blanditiis reprehenderit, voluptatem facilis aspernatur reiciendis placeat
      officia! Ullam eius illo id molestiae? Exercitationem beatae eaque
      mollitia aliquid optio incidunt sit quibusdam autem aspernatur.
    </div>
  </body>
</html>

5.CSS3网格布局

<!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>网格布局</title>
    <style>
      * {
        box-sizing: border-box;
      }
      .father {
        width: 800px;
        height: 800px;
        background-color: pink;
        display: grid;
        grid-template-columns: 200px 200px;
        grid-template-rows: 200px 200px 200px 200px; /*四个值代表四行，200px代表行高200px*/
        /* grid-template-columns: 50% 50%;    百分比使用*/
        /* grid-template-rows: repeat(4, 25%);   函数简化 */
      }
      .father div {
        width: 200px;
        height: 200px;
        border: solid black;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

基本使用