手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

如何使用CSS3中的属性设置元素的内阴影并显示

时间:2024-10-21 08:04:19

1、第一步,双击打开HBuilderX工具,并新建一个HTML5模板,修改title内容,如下图所示:

如何使用CSS3中的属性设置元素的内阴影并显示

2、第二步,在<body></body>标签内,插入一个div标签并设置class属性,如下图所示:

如何使用CSS3中的属性设置元素的内阴影并显示

3、第三步,接着使用<style></style>,设置页面全局的样式,如内外边距、字体属性,如下图所示:

如何使用CSS3中的属性设置元素的内阴影并显示

4、第四步,再使用类选择器shadow,设置宽度、高度、边框和椭圆角,如下图所示:

如何使用CSS3中的属性设置元素的内阴影并显示

5、第五步,保存代码并打开浏览器预览界面效果,可以发现一个椭圆角的边框,如下图所示:

如何使用CSS3中的属性设置元素的内阴影并显示

6、第六步,再在类选择器中,添加box-shadow属性,兼容不同浏览器的,如下图所示:

如何使用CSS3中的属性设置元素的内阴影并显示
© 手抄报圈