盒子模型——圆角

作用：设置元素的外边框为圆角

属性名：border-radius

属性值：数字+px/百分比

也可以每个角设置不同的效果，从左上角顺时针开始赋值，没有取值的角与对角取值相同。

正圆 

给正方形盒子设置圆角属性值为宽高的一半/50%

例如：

        div {

            width: 200px;

            height: 200px;

            background-color: aqua;

            border-radius: 100px;

        }

 

也可以写成:border-radius:50px; 效果与上面一样。

胶囊

border-radius设置为高度的一半即可

    <style>

        div {

            width: 500px;

            height: 200px;

            background-color: aqua;

            border-radius: 100px;

        }

    </style>

           

盒子模型——阴影

属性名：box-shadow

属性值：x轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影

注：

• X轴偏移量和Y轴偏移量必须书写
• 默认是外阴影，内阴影需要添加inset

    <style>

        div {

            width: 200px;

            height: 200px;

            background-color: aqua;

            border-radius: 100px;

            box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.5);

        }

    </style>

 

阴影也可以在里边，只需在box-shadow最后加上inset