CSS3新增（选择器、盒模型、边框阴影）

最新推荐文章于 2024-03-19 12:02:27 发布

程序媛Gidy

最新推荐文章于 2024-03-19 12:02:27 发布

阅读量332

点赞数 2

分类专栏： css 前端学习文章标签： css3

本文链接：https://blog.youkuaiyun.com/qq_46492364/article/details/114776540

版权

前端学习同时被 2 个专栏收录

38 篇文章

订阅专栏

css

11 篇文章

订阅专栏

文章目录

前言
一、css3
二、css3盒模型
三、css3新增属性
总结

前言

开始今天的前端学习内容，近几天学的很赶，还是多多复习一下前边的内容，否则就会导致学过的东西却忘记了。

一、css3

1.新增子级选择器

子级选择器用于选取带有特定父元素的元素。>前后必须满足父子级关系。

代码如下（示例）：

.box > p {
    background-color: pink;
        }
.inner > p {
    color: brown;
}

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>Document</title>
    <style>
        .box1 h2 + p {
            background-color: brown;
        }
        p + p {
            color: burlywood;
        }
    </style>
</head>
<body>
    <div class="box1">
        <h2>二级标题 </h2>
        <!-- <div>内容</div> -->
            <p>段落1</p>
            <p>段落2</p>
            <p>段落3</p>
            <p>段落4</p>
    </div>
</body>
</html>

其他兄弟选择器
一个元素后面所有的元素，用“~”来书写，选择的是拥有相同父元素后面所有的元素。
代码如下（示例）：

.box2 h2 ~ p {
            background-color: chartreuse;
        }

3.结构伪类选择器

在这里插入图片描述
nth-child（n），n可以是数字，也可以是关键词even偶数、odd奇数。也可以是公式。公式如下：

代码如下（示例）：

<!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>
        .box1 :first-child {
            background-color: pink;
        }
        .box1 :last-child {
            background-color: plum;
        }
        /* .box1 :nth-child(3){
            background-color: purple;
        } */
        .box1 p:nth-child(odd){
            background-color: purple;
        }
        .box1 p:first-of-type {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box1">
        <h2>二级标题 </h2>
            <p>段落1</p>
            <p>段落2</p>
            <p>段落3</p>
            <p>段落4</p>
            <p>段落5</p>
    </div>
</body>
</html>

nth-child（n）,匹配父元素的第n个子元素，同时需要满足两个条件
nth-of-type（n），匹配同类型中的第n个同级兄弟元素，会忽视其他同级的非同类型元素。

4.伪元素选择器

在这里插入图片描述

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box {
      width: 400px;
      padding: 10px;
      border: 1px solid #000;
    }
    .box p {
      width: 50px;
      height: 50px;
      margin-bottom: 10px;
      background-color: skyblue;
    }
    /* 给box盒子内部添加伪元素 */
    .box::before {
      content: "1";
      display: block;
      height: 50px;
      background-color: pink;
    }
    .box::after {
      content: "2";
      display: block;
      height: 50px;
      background-color: pink;
    }
    /* .ps::first-letter {
      color: red;
    } */
    .ps::first-line {
      color: red;
    }
  </style>
</head>
<body>
  <div class="box">
    <p class="ps">这是一个段落内容</p>
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>
</html>

5.属性选择器

属性选择器用来选择包含指定属性的标签。
在这里插入图片描述

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      /* input[name] {
        width: 30px;
        height: 30px;
      } */
      /* input[type="checkbox"] {
        width: 30px;
        height: 30px;
      } */
      /* input[class^="icon"] {
        width: 30px;
        height: 30px;
      } */
      input[class$="dan"] {
        width: 30px;
        height: 30px;
      }
      input[type*="o"] {
        width: 30px;
        height: 30px;
      }
  </style>
</head>
<body>
  <p>
    <input type="radio" name="sex" class="icon-dan"> 男性
    <input type="radio" name="sex" class="icon-dan"> 女性
  </p>
  <p>
    <input type="checkbox" class="icon-duo"> 运动
    <input type="checkbox" class="icon-duo"> 代码
  </p>
  <p>
    <input type="button" value="按钮">
    <input type="submit" value="提交按钮">
  </p>
</body>
</html>

选择器权重：
基础选择器:id选择器、类选择器、标签选择器、通配符选择器。
伪类选择器和属性选择器的权重等于类选择器。伪元素选择器的权重等于标签选择器权重。

二、css3盒模型

css3中可以通过box-sizing来指定盒模型，这样我们就可以设置如何计算一个元素的总宽度和总高度。
content-box，默认值，内容区域为固定的，width height。
border-box，怪异模式，盒模型是内减的。
代码如下（示例）：

<!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>
        * {
            margin: 0;
            padding:0;
        }
        .box {
            width: 200px;
            height:200px;
            padding: 10px;
            border: 10px solid #ccc;
            background-color: bisque;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box">文字内容</div>
</body>
</html>

三、css3新增属性

1.边框圆角

属性名：border-radius，设置边框圆角。属性值可以是像素值和百分比。
单一属性：border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-left-radius
简写方法：border-radius四值，左上右上右下左下。
三值，左上右上和左下右下。
二值，左上右下右上和左下
一值，四个角相同。
代码如下（示例）：

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 200px;
            height: 200px;
            padding: 30px;
            /* border-radius: 130px/130px; */
            /* border-bottom-left-radius:50px; */
            border-radius: 50px 100px 20px /40px 60px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果展示：
在这里插入图片描述
IE8及以下版本浏览器不支持border-radius属性，其他浏览器都支持。

2.文字阴影

text-shadow，规定水平阴影，垂直阴影，模糊距离，以及阴影颜色。
h-shadow：必须，水平阴影的位置。
v-shadow：必须，垂直阴影位置。
blur，可选，模糊的距离。
color，可选，阴影的颜色。
多层阴影：可以用逗号分隔开，阴影有四个属性值，先写的阴影压盖在后写的阴影之上。
代码如下（示例）：

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        .word {
            margin: 50px;
            font: bold 30px/50px "微软雅黑";
            /* 文字阴影：水平位置 垂直位置 模糊程度 颜色 */
            /* text-shadow: 3px 3px 5px red; */

            /* 多层阴影 */
            text-shadow: 3px 3px red,
            6px 6px #0f0,
            9px 9px #00f;
        }
    </style>
</head>
<body>
    <p class="word">文字阴影效果</p>
</body>
</html>

效果展示：
在这里插入图片描述

3.盒子阴影

也叫作边框阴影，box-shadow属性用于对盒子边框添加阴影。
属性值，h-shadow，v-shadow，blur，spread阴影的尺寸，color，inset将外部阴影改为内部阴影。
多层阴影：可以用逗号分隔开，阴影有四个属性值，先写的阴影压盖在后写的阴影之上。
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box {
      width: 200px;
      height: 200px;
      padding: 20px;
      border: 10px solid #0ff;
      margin: 50px;
      background-color: pink;
      /* 边框阴影：水平位置 垂直位置 模糊程度 扩展大小 颜色 是否内边框阴影 */
      /* 注意：外部的边框阴影不需要进行设置，他是默认的，如果增加了outset值反而出现错误 */
      /* box-shadow: 20px 20px 5px 20px red inset; */
      box-shadow: 20px 20px 5px red,
      40px 40px 5px #0f0,
      60px 60px 5px #00f;
    }

  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>