css盒子模型及其实战案例（下）

最新推荐文章于 2024-07-15 22:43:41 发布

爱音斯坦牛

最新推荐文章于 2024-07-15 22:43:41 发布

阅读量1.7k

点赞数 19

分类专栏：软磨 css 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_57421630/article/details/122782169

版权

软磨 css 专栏收录该内容

18 篇文章 61 订阅

订阅专栏

📋 个人简介

💖 作者简介：大家好，我是阿牛😜
📝 个人主页：馆主阿牛🔥
🎉 支持我：点赞👍+收藏⭐️+留言📝
📣 系列专栏：web开发🍁
💬格言：迄今所有人生都大写着失败，但不妨碍我继续向前！🔥

请添加图片描述

💐前言

今天总结盒子模型剩下的一点内容

🌷圆角边框

在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。
border - radius 属性用于设置元素的外边框圆角。

 语法：
 border - radius : length ;

参数值可以为数值或百分比的形式。
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%。
如果是个矩形设置为高度的一半就可以做。
该属性是一个简写属性，可以跟四个值，分别代耘上角、右上角、右下角、左下角。
分开写： border - top - left - radius 、 border - top - right - radius 、 border- bottom - right - radius 和border - bottom - left - radius。

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>Document</title>
    <style>
        /* 正方形->圆形,如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%。 */
        .demo1{
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border-radius: 50%; /*100px*/
        }
        /* 如果是个矩形设置为高度的一半就可以做 。 */
        .demo2{
            display: inline-block;
            width: 400px;
            height: 100px;
            background-color: pink;
            border-radius: 50px;
        }
        .demo3{
            display: inline-block;
            width: 400px;
            height: 100px;
            background-color: rgb(211, 31, 61);
            border-radius: 10px;
        }
     
      </style>
  </head>
  <body>
      <div class="demo1">  </div>  
      <div class="demo2"> </div>
      <div class="demo3"> </div>
  </body>
</html>

在这里插入图片描述
2、原理。
请添加图片描述

所以正方形想要设置为一个圆，把数值修改为高度或者宽度的一半即可

如果是个矩形设置为高度的一半就可以。

🌷盒子阴影

CSS3中新增了盒子阴影，我们可以使用 box - shadow 属性为盒子添加阴影。

语法：
 box - shadow : h-shadow v-shadow blur spread color inset ;

属性	描述
h - shadow	必需。水平阴影的位置。允许负值。
v - shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。
inset	可选。将外部阴影（ outset ）改为内部阴影。

注意：
1．默认的是外阴影（ outset )，但是不可以写这个单词，否则导致阴影无效。
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>
        /* 正方形->圆形,如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%。 */
        .demo1{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border-radius: 50%; /*100px*/
            box-shadow: 10px 10px 10px 10px rgba(35, 4, 4, .4);
        }
       
     
      </style>
  </head>
  <body>
      <div class="demo1">  </div>  
   
  </body>
</html>

在这里插入图片描述

🌷文字阴影

在CSS3中，我们可以使用 text - shadow 属性将阴影应用于文本。

语法：
 text - shadow : h - shadow v - shadow blur color ;

属性	描述
h - shadow	必需。水平阴影的位置。允许负值。
v - shadow	必需。垂直阴影位置。允许负值。
blurl	可选。模糊的距离。
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>
        .demo1{
            font-size: 30px;
            color:orange;
            text-shadow: 5px 5px 6px rgba(17, 1, 1, .4) ;  
        }     
      </style>
  </head>
  <body>
      <div class="demo1"> 勇敢牛牛，不怕困难 </div>  
  </body>
</html>