CSS—尺寸与边框_css边框从无到有-CSDN博客

本文链接：https://blog.csdn.net/fjxcsdn/article/details/86651116

本文深入讲解了CSS中的尺寸属性，包括宽度、高度、最小和最大尺寸的设置，以及边框、边框倒角和边框阴影的详细用法，通过实例展示了如何使用这些属性来美化网页元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、尺寸属性

作用	改变元素的宽度和高度

宽度

width : 宽度
min-width : 最小宽度
max-width : 最大宽度

高度

height : 高度

min-height : 最小高度
max-height : 最大高度

页面中允许设置尺寸的元素

所有的块级元素都允许设置尺寸：div,p,h1,h2,...,ul,ol,dl,dt,dd, ...

行内块元素允许设置尺寸：表单控件元素(单选按钮，复选框)

本身具备 width 和 height 的HTML元素：img , table

注意：大部分的行内元素是无法修改尺寸的

溢出处理：当内容多，元素小的时候，就会产生溢出的效果，默认都是纵向溢出

属性：	overflow,overflow-x,overflow-y
取值：	visible：可见的，默认值，溢出可见（基本不用） hidden：隐藏的，溢出的内容全部隐藏，不可见（基本不用） scroll：显示滚动条，溢出时，可用 auto：自动，溢出时才显示滚动条并可用（体验最好）

效果展示

border简写方式	border:width style color;（属性值依次填写）
单边定义	border-top/right/bottom/left:width style color;
style : 边框样式	solid : 实线边框 dotted : 虚线边框(点) dashed : 虚线边框(线)
color : 边框颜色	可以取值为 transparent（透明）
注意：	border:none; / border:0; 取消边框

效果展示：

属性：将元素四个角换成圆角	border-radius:值;
取值	以px为单位的具体值 / %

效果展示：

box-shadow:5px 5px #ddd

取值
h-shadow	阴影的水平偏移距离，必须的取值为正，阴影右偏移取值为负，阴影左偏移
v-shadow	阴影的垂直偏移距离，必须的取值为正，阴影下偏移取值为负，阴影上偏移
blur	模糊距离，取值越大，模糊效果越明显，以 px 为单位的数值
spread	阴影的大小，指定要在基础阴影上扩充出来的大小距离，取值为 px 为单位的数值
color	阴影颜色
inset	将默认的外阴影改为内阴影