导图社区 CSS3的边框、渐变、圆角
这是一篇关于CSS3的边框、渐变、圆角的思维导图
编辑于2022-03-10 12:52:39CSS基础
边框
应用于块级元素,设置边框时可以四个方向都设置
border-top 上边框
border-left 左边框
border-right 右边框
border-bottom 下边框
边框阴影:box-shadow
h-shadow
水平阴影的位置(必填)
v-shadow
垂直阴影的位置(必填)
blur
模糊阴影距离(可选)
color
阴影颜色(可选)
inset/outset
向内/外散播
box-shadow:10px(水平方向) 10px(垂直方向) 50px(模糊距离) color;
h-shadow和v-shadow取正值时,阴影方向是向右、向下扩散
h-shadow和v-shadow取负值时,阴影方向是向左、向上扩散
渐变
线性渐变
沿着一个指定的方向进行渐变,如不设置方向,默认反向是从上到下
标准语法
background-image:linear-gradient(颜色,颜色,……)
带方向的语法
background-image:linear-gradient(to 方向单词,颜色,……)
background-image:linear-gradient(角度值deg,颜色,……)
角度值是正值时从屏幕的左侧开始
角度值是负值时从屏幕的右侧开始
径向渐变
以一个圆心为中心向四周进行渐变
标准语法
background-image:-webkit-radial-gradient(颜色,颜色,……)
不均匀语法
background-image:-webkit-radial-gradient(颜色 百分比,颜色 百分比,……)
定义形状
background-image:-webkiit-radial-gradient(x轴位置 y轴位置,形状单词(circle 圆形、ellipse 椭圆),颜色,……)
x轴、y轴的值
代表方向的单词
left
right
top
bottom
px(像素)
数字 + %
圆角:使元素边框更圆润
border-radios:设置四个方向
取四个值时
左上角、右上角、右下角、左下角
取三个值时
左上角、右上角和左下角、右下角
取两个值时
左上角和右下角、右上角和左下角
取一个值时
四个角一致
注:取值
数字+ px
数字+ %
数值超过块宽高的50%时,无论加多大都无效
宽高一致显示圆形
宽高不一致显示椭圆
border-left-top-radius
左上
border-right-top-radius
右上
border-right-bottom-radius
右下
border-left-bottom-radius
左下
背景
background-size
设置背景图片大小
cover
覆盖
contain
适应,当宽或高有一个边达到块的最大值时,图片的大小不再变化
percentage
以父元素的百分比来设置宽高,只设置一个值时,第二个值是auto(自动)