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

最新推荐文章于 2024-08-31 09:24:27 发布

趋之

最新推荐文章于 2024-08-31 09:24:27 发布

阅读量716

点赞数 8

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

本文链接：https://blog.csdn.net/csgojingyu/article/details/135084074

版权

css 专栏收录该内容

31 篇文章 3 订阅

订阅专栏

一：设置盒子大小-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>