0
点赞
收藏
分享

微信扫一扫

05-CSS3圆角边框、盒子阴影、文字阴影

前程有光 2022-04-20 阅读 51
htmlcss

圆角边框


实例:
在这里插入图片描述

语法:

四个值:如果不同的角圆角度数不一样,就以左上角为起点,顺时针顺序排序。
border-radius:左上角 右上角 右下角 左下角;

两个值:对角线关系。
border-radius: 左上和右下角 右上和左下角

三个值
border-radius:左上角 右上和左下角 右下角

一个值
border-top/bottom-left/right-radius : length;


盒子阴影


实例:
在这里插入图片描述

语法:

描述
h-shadow必需。水平阴影位置。(正值往右走,负值往左走)
v-shadow必需。垂直阴影位置。(正值往下走,负值往上走)
blur可选。模糊距离。(数值越大,影子越模糊 )
spread可选。阴影尺寸。(影子的大小)
color可选。阴影颜色
inset可选。将外部阴影改为内部阴影

文字阴影


实例:
在这里插入图片描述

语法:

描述
h-shadow必需。水平阴影位置。(正值往右走,负值往左走)
v-shadow必需。垂直阴影位置。(正值往下走,负值往上走)
blur可选。模糊距离。(数值越大,影子越模糊 )
color可选。阴影颜色
举报

相关推荐

0 条评论