本文主要是介绍CSS中设置盒子大小-box-sizing，设置盒子阴影- box-shadow ，设置盒子圆角-border-radius，属性及其属性值，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一：设置盒子大小-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>这篇关于CSS中设置盒子大小-box-sizing，设置盒子阴影- box-shadow ，设置盒子圆角-border-radius，属性及其属性值的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
