CSS中设置盒子大小-box-sizing，设置盒子阴影- box-shadow ，设置盒子圆角-border-radius，属性及其属性值

发布时间：2023年12月21日

一：设置盒子大小-box-sizing

默认情况下：盒子可见宽的大小由内容区，内边距，边框共同决定

box-sizing 属性用来设置盒子尺寸的计算方式， 也就是 width/height 指的是谁

? ? ? ? 可选值：

? ? ? ? ? ? ? ? content-box 内容区 默认值

? ? ? ? ? ? ? ? border-box 宽度和高度用来设置整个盒子可见框的大小，包括边框，padding，内容区

二：设置盒子阴影- box-shadow（ 参数1，参数2，参数3，参数4）

设置元素的阴影效果，不会影响到页面布局

? ? ? ? 第一个值：水平偏移量 正->左 负->右

? ? ? ? 第二个值：垂直偏移量 正->下 负->上

? ? ? ? 第三个值：模糊半径

? ? ? ? 第四个值：颜色

三：设置盒子圆角-border-radius

border-radius 用来设置圆角 ? 以XXpx为半径画圆

? ? ? ? 还可以单独设置一角的圆角

? ? ? ? ? ? ? ? border-top-right-radius

? ? ? ? ? ? ? ? border-top-left-radius

? ? ? ? ? ? ? ? border-bottom-left-radius

? ? ? ? ? ? ? ? border-bottom-right-radius

? ? ? ? 设置圆形

? ? ? ? border-radius: 50%;

<!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: red;
            border: 10px solid yellowgreen;
            box-sizing:border-box;   
          }
      .box1 {
        width: 200px;
        height: 200px;
        background-color: #f60;
        box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        /* border-radius: 10px  50px; */
        /* border-radius:50%; */
        border-top-right-radius:50px;
      }
 
    </style>
  </head>
  <body>
    <!-- 阴影例子 -->
    <div class="box1 box"></div>
    <!-- 圆角例子 -->
    <div class="box2"></div>
    
  </body>
</html>
文章来源:https://blog.csdn.net/csgojingyu/article/details/135084074
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章